:root {
  --blue: #2d7ff9;
  --deep: #123763;
  --purple: #7144ee;
  --yellow: #ffd84d;
  --green: #18b875;
  --red: #e24d63;
  --shadow: 0 .55rem 0 rgba(35, 98, 172, .22), 0 1rem 2.2rem rgba(18, 55, 99, .16);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #70b9ff; }
body {
  margin: 0;
  min-height: 100%;
  font-family: "Noto Sans Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif;
  color: var(--deep);
  background:
    radial-gradient(circle at 9% 16%, rgba(255, 244, 155, .62), transparent 21rem),
    radial-gradient(circle at 88% 13%, rgba(255, 170, 217, .48), transparent 22rem),
    radial-gradient(circle at 14% 88%, rgba(104, 232, 224, .5), transparent 24rem),
    radial-gradient(circle at 88% 82%, rgba(158, 126, 255, .36), transparent 24rem),
    linear-gradient(135deg, #5fb0ff 0%, #7ee6ee 42%, #fff1bd 76%, #f1c0ff 100%);
  font-weight: 800;
}

.awf-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.58) 0 .22rem, transparent .26rem),
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.46) 0 .18rem, transparent .22rem),
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .68;
}

.awf-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem clamp(1rem, 3vw, 2rem);
  background: rgba(246, 252, 255, .58);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(18, 55, 99, .12);
}

.awf-brand { display: flex; align-items: center; gap: .55rem; color: var(--deep); text-decoration: none; }
.awf-brand img { width: 3.2rem; height: 3.2rem; border-radius: 1rem; }
.awf-hud { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: flex-end; }
.awf-hud b {
  display: grid;
  gap: .1rem;
  min-width: 5.4rem;
  padding: .42rem .7rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 0 rgba(35, 98, 172, .12);
  text-align: center;
}
.awf-hud b:first-child { min-width: 8.4rem; }
.awf-hud span { font-size: .72rem; color: #2b6cae; }
.awf-hud strong { font-size: 1.05rem; direction: ltr; }

.awf-app {
  position: relative;
  z-index: 1;
  width: min(74rem, calc(100% - 1.6rem));
  margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2rem) 0 3rem;
}

.awf-hero,
.awf-layout,
.awf-report {
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 244, 155, .3), transparent 16rem),
    radial-gradient(circle at 82% 18%, rgba(183, 122, 255, .24), transparent 16rem),
    linear-gradient(145deg, rgba(255,255,255,.5), rgba(230,244,255,.3));
  backdrop-filter: blur(15px);
  box-shadow: var(--shadow);
}

.awf-hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
  align-items: center;
  min-height: 24rem;
  padding: clamp(1.1rem, 4vw, 2.4rem);
  overflow: hidden;
}

.awf-kicker {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: rgba(230,244,255,.68);
  color: #2362ac;
  font-weight: 1000;
}

.awf-hero h1 { margin: .8rem 0 .5rem; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; }
.awf-hero p { margin: 0; color: rgba(18,55,99,.78); font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.7; }
.awf-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.awf-primary,
.awf-secondary,
.awf-controls button {
  border: 0;
  border-radius: 1rem;
  padding: .8rem 1.1rem;
  font: inherit;
  font-weight: 1000;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 0 #174d93;
}
.awf-primary { background: linear-gradient(135deg, var(--yellow), #ff9e69); color: #123763; }
.awf-secondary,
.awf-controls button { background: #fff; color: #2362ac; }

.awf-cover { direction: ltr; display: grid; grid-template-columns: repeat(2, 6rem); gap: .8rem; justify-content: center; transform: rotate(-4deg); }
.awf-cover span,
.awf-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 1.15rem;
  background: radial-gradient(circle at 30% 20%, #fff, #fff3dd 62%, #ffe0a7);
  color: #343842;
  font-size: 3rem;
  font-weight: 1000;
  box-shadow: 0 .42rem 0 #0c6b61, 0 .8rem 1.2rem rgba(18,55,99,.22), inset 0 3px 0 rgba(255,255,255,.9);
  border: 2px solid rgba(255,255,255,.82);
  position: relative;
}

.awf-layout {
  display: grid;
  grid-template-columns: minmax(15rem, .8fr) minmax(22rem, 1.45fr) minmax(14rem, .75fr);
  gap: 1rem;
  padding: 1rem;
}
.awf-side,
.awf-board-wrap {
  border-radius: 1.5rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,.54), rgba(239,248,255,.32));
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75);
  padding: 1rem;
}

.awf-target-panel { display: grid; gap: .75rem; align-content: start; }
.awf-falling-word {
  direction: ltr;
  text-align: center;
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  font-weight: 1000;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border-radius: 1.35rem;
  padding: .7rem;
  box-shadow: 0 7px 0 #174d93;
  animation: dropWord .55s ease;
}
.awf-target-panel p { margin: 0; text-align: center; color: #2362ac; }
.awf-slots { display: flex; justify-content: center; gap: .35rem; }
.awf-slot {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: .75rem;
  background: #e9f6ff;
  border: 2px dashed #8cc5ef;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  font-weight: 1000;
  color: var(--deep);
}
.awf-slot.is-filled { background: #d7f8e8; border-style: solid; border-color: #23c47e; }
.awf-streak,
.awf-feedback { border-radius: 1rem; padding: .7rem; text-align: center; background: rgba(238,247,255,.72); }
.awf-feedback.ok { background: #d9f8e8; color: #087848; }
.awf-feedback.bad { background: #ffe1e6; color: #a01830; }

.awf-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.awf-controls button { padding: .65rem .4rem; font-size: .85rem; box-shadow: 0 4px 0 #9ec6e8; }
.awf-board-wrap { display: grid; grid-template-rows: auto minmax(4.6rem, auto); gap: .85rem; }
.awf-board { display: grid; grid-template-columns: repeat(5, minmax(3.2rem, 1fr)); gap: .65rem; direction: ltr; touch-action: manipulation; }
.awf-tile {
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  min-height: 4.6rem;
  cursor: pointer;
  animation: tileFloat 2.1s ease-in-out infinite;
  animation-delay: calc(var(--delay, 0) * -.16s);
  transition: transform .16s ease, filter .16s ease;
}
.awf-tile:hover,
.awf-tile:focus-visible { transform: translateY(-.28rem) rotate(-1deg); filter: saturate(1.12); }
.awf-tile small { position: absolute; right: .55rem; bottom: .35rem; font-size: .72rem; color: #666; }
.awf-tile.is-correct { background: #d7f8e8; box-shadow: 0 .42rem 0 #13a66b, 0 0 0 .35rem rgba(24,184,117,.18); }
.awf-tile.is-wrong { background: #ffdbe3; box-shadow: 0 .42rem 0 #ce334b; animation: shake .24s ease; }
.awf-tile.is-used { opacity: .55; animation: none; }

.awf-found { border-radius: 1.2rem; background: rgba(247,251,255,.64); padding: .7rem; backdrop-filter: blur(10px); }
.awf-found h2,
.awf-leaders h2 { margin: 0 0 .45rem; }
.awf-found ol,
.awf-leaders ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.awf-found li,
.awf-leaders li {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  border-radius: .8rem;
  background: rgba(255,255,255,.76);
  padding: .55rem .7rem;
  box-shadow: 0 3px 0 rgba(35,98,172,.1);
}
.awf-leaders p { margin: .2rem 0 .8rem; color: rgba(18,55,99,.68); }

.awf-report { padding: clamp(1.2rem, 4vw, 2.2rem); text-align: center; }
.awf-report h2 { font-size: clamp(2rem, 5vw, 3.2rem); margin: .2rem 0; }
.awf-report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1rem 0; }
.awf-report-grid b { display: grid; gap: .2rem; background: rgba(255,255,255,.78); border-radius: 1.1rem; padding: 1rem; box-shadow: 0 4px 0 rgba(35,98,172,.12); }
.awf-rank-line { margin: .5rem auto 0; width: min(34rem, 100%); border-radius: 1rem; padding: .8rem 1rem; background: rgba(215,248,232,.72); color: #087848; }

@keyframes dropWord { 0% { transform: translateY(-55px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes tileFloat { 0%, 100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-.18rem) rotate(.5deg); } }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

@media (max-width: 980px) {
  .awf-app { width: min(52rem, calc(100% - 1rem)); padding-top: .75rem; }
  .awf-layout { grid-template-columns: minmax(12rem, .72fr) minmax(20rem, 1.28fr); gap: .7rem; padding: .7rem; }
  .awf-side { order: 0; }
  .awf-board-wrap { order: 1; }
  .awf-leaders { order: 2; grid-column: 1 / -1; }
  .awf-hero { grid-template-columns: 1fr; }
  .awf-cover { grid-template-columns: repeat(4, 4rem); }
  .awf-target-panel { gap: .5rem; }
  .awf-falling-word { font-size: clamp(2rem, 6vw, 3.2rem); padding: .5rem; }
  .awf-slot { width: 2.25rem; height: 2.25rem; }
  .awf-board { gap: .5rem; }
  .awf-tile { min-height: 4rem; }
  .awf-found { max-height: 7rem; overflow: auto; }
}

@media (max-width: 700px) {
  .awf-topbar { position: static; align-items: flex-start; gap: .45rem; padding: .45rem .55rem; }
  .awf-brand img { width: 2.35rem; height: 2.35rem; }
  .awf-brand span { font-size: .78rem; }
  .awf-hud { gap: .32rem; }
  .awf-hud b { min-width: 4.05rem; padding: .28rem .38rem; border-radius: .72rem; }
  .awf-hud b:first-child { min-width: 6.8rem; }
  .awf-hud span { font-size: .58rem; }
  .awf-hud strong { font-size: .85rem; }
  .awf-app { width: min(100% - .55rem, 33rem); padding: .45rem 0 1.2rem; }
  .awf-layout { grid-template-columns: 1fr; gap: .45rem; padding: .45rem; border-radius: 1.25rem; }
  .awf-side,
  .awf-board-wrap { border-radius: 1rem; padding: .55rem; }
  .awf-target-panel { gap: .34rem; }
  .awf-target-panel .awf-kicker,
  .awf-target-panel p { display: none; }
  .awf-falling-word { font-size: clamp(1.9rem, 10vw, 2.8rem); border-radius: .95rem; padding: .32rem .5rem; box-shadow: 0 4px 0 #174d93; }
  .awf-slots { gap: .22rem; }
  .awf-slot { width: 1.85rem; height: 1.85rem; border-radius: .52rem; font-size: 1rem; }
  .awf-streak,
  .awf-feedback { padding: .42rem; font-size: .82rem; border-radius: .7rem; }
  .awf-controls { grid-template-columns: repeat(3, 1fr); gap: .3rem; }
  .awf-controls button { padding: .45rem .2rem; font-size: .72rem; border-radius: .65rem; box-shadow: 0 3px 0 #9ec6e8; }
  .awf-board-wrap { gap: .45rem; }
  .awf-board { grid-template-columns: repeat(5, minmax(2.55rem, 1fr)); gap: .32rem; }
  .awf-tile { min-height: 2.9rem; border-radius: .72rem; font-size: clamp(1.35rem, 8vw, 2.05rem); box-shadow: 0 .24rem 0 #0c6b61, 0 .45rem .8rem rgba(18,55,99,.18), inset 0 2px 0 rgba(255,255,255,.9); }
  .awf-tile small { right: .32rem; bottom: .18rem; font-size: .55rem; }
  .awf-found { display: none; }
  .awf-leaders { display: none; }
  .awf-report-grid { grid-template-columns: 1fr; }
}