/* ============ شاشة اللعب ============ */
.play { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 0 16px 4px; }

.play__bar { flex: none; display: flex; align-items: center; gap: 10px; }
.play__meta { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.play__meta b { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; }
.play__meta span { font-size: 10.5px; color: var(--text-muted); }

.play__hero {
  flex: none; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 8px; padding: 2px 0 4px;
  transition: padding var(--t-base) var(--ease);
}
.play__side { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.play__side--end { align-items: flex-end; }
.play__k { font-size: 9.5px; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.play__v { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--text-2); }

.play__tilewrap { position: relative; display: grid; place-items: center; }
.play__tilewrap::before {
  content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(228,176,74,.24), transparent 66%);
  pointer-events: none;
}
.play__tile {
  width: 96px; height: 96px; font-size: 52px; border-radius: 24px;
  transition: width var(--t-base) var(--ease), height var(--t-base) var(--ease), font-size var(--t-base) var(--ease);
  position: relative; z-index: 1;
}
.play__hint { text-align: center; font-size: 10.5px; color: var(--text-muted); margin: -2px 0 2px; }

/* — الحقول الستة: تتقلّص لتناسب الشاشة بلا تمرير — */
.play__fields { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px;
  justify-content: space-evenly; overflow-y: auto; scrollbar-width: none; }
.play__fields::-webkit-scrollbar { display: none; }
.pf {
  height: 58px; flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 11px; border-radius: 14px; background: var(--glass);
  border: 1px solid var(--line); overflow: hidden;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.pf__ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--glass-2); color: var(--gold-400); font-size: 14.5px;
}
.pf__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.pf__lab { font-size: 10px; font-weight: 600; color: var(--text-muted); line-height: 1.4; }
.pf input {
  width: 100%; background: none; border: 0; outline: 0; padding: 0;
  font-size: 16px; font-weight: 500; color: var(--text); line-height: 1.5;
  font-family: var(--font-body);
}
.pf input::placeholder { color: #4B5468; font-size: 13px; font-weight: 400; }
.pf__ok {
  width: 21px; height: 21px; flex: none; display: grid; place-items: center; font-size: 16px;
  color: var(--mint-400); opacity: 0; transform: scale(.6);
  transition: opacity var(--t-fast), transform var(--t-fast) var(--ease);
}
.pf.is-done { border-color: rgba(63,214,168,.4); background: rgba(63,214,168,.055); }
.pf.is-done .pf__ok { opacity: 1; transform: none; }
.pf:focus-within {
  border-color: rgba(228,176,74,.62); background: rgba(228,176,74,.06);
  box-shadow: 0 0 0 3px rgba(228,176,74,.1);
}
.pf:focus-within .pf__ico { background: rgba(228,176,74,.16); }

/* — سطر سفلي — */
.play__foot { flex: none; display: flex; align-items: center; gap: 10px; padding-top: 2px; }
.play__count { display: flex; flex-direction: column; align-items: center; min-width: 44px; gap: 3px; }
.play__count b { font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.play__count span { font-size: 8.5px; color: var(--text-muted); }
.play__dots { display: flex; gap: 3px; }
.play__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
.play__dots i.on { background: var(--gold-500); }
.play__cta { flex: 1; }

/* — آخر ١٠ ثوانٍ: نبض + اهتزاز خفيف — */
.play.is-urgent .play__tile {
  box-shadow: 0 0 0 3px rgba(255,107,122,.3), 0 16px 38px rgba(226,74,92,.3);
}
.play.is-urgent .play__tilewrap::before {
  background: radial-gradient(circle, rgba(255,107,122,.3), transparent 66%);
}
.play.is-urgent .play__hero { animation: urgentShake 1s var(--ease) infinite; }
.play.is-urgent .urgent { display: flex; }
@keyframes urgentShake {
  0%, 100% { transform: translateX(0) }
  8% { transform: translateX(-2px) rotate(-.35deg) }
  16% { transform: translateX(2px) rotate(.35deg) }
  24% { transform: translateX(0) }
}
.urgent {
  display: none; align-items: center; gap: 5px; margin: 0 auto 2px;
  height: 22px; padding: 0 10px; border-radius: var(--r-full);
  background: rgba(255,107,122,.13); color: var(--coral-400);
  font-size: 10px; font-weight: 700; flex: none;
}

/* — لوحة المفاتيح مفتوحة: تصغير الهوية البصرية — */
.play:focus-within .play__tile { width: 62px; height: 62px; font-size: 34px; border-radius: 16px; }
.play:focus-within .play__tilewrap::before { width: 100px; height: 100px; }
.play:focus-within .play__hint { display: none; }
.play:focus-within .play__hero { padding: 0; }