/* Freefall (freefall.php + scripts/freefall.js): the start and end cards, the bar (score, streak, lives, Pause), the well
   the clue falls down, and the answer box or four choices under it. The page header is the shared play-page shell (.ec-play-*). */
.ec-ff-card { display: grid; justify-items: center; gap: 10px; max-width: 560px; margin: 8px auto; padding: 28px 24px; text-align: center;
	border: 1px solid var(--ec-line); border-radius: 14px; background: var(--ec-surface); box-shadow: var(--ec-shadow); }
.ec-ff-card[hidden], .ec-ff-run[hidden] { display: none; }
.ec-ff-card h2 { margin: 0; font: 600 26px "Rubik", sans-serif; }
.ec-ff-card p { margin: 0; color: var(--ec-ink-2); }
.ec-ff-start-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--t-bg); color: var(--t-ink); font-size: 30px; }
.ec-ff-go { justify-content: center; min-width: 180px; margin-top: 6px; font-size: 18px; }

/* ---- playing */
.ec-ff-run { max-width: 760px; margin: 0 auto; scroll-margin-top: 8px; }
.ec-ff-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 8px; }
.ec-ff-bar p { margin: 0; }
.ec-ff-score span { font-size: 14px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ec-ink-2); }
.ec-ff-score b { font: 600 24px "Rubik", sans-serif; color: var(--t-ink); font-variant-numeric: tabular-nums; }
.ec-ff-streak { font-weight: 700; color: var(--ec-green-ink); }
.ec-ff-lives { display: flex; flex-wrap: wrap; gap: 3px; margin-left: auto !important; color: #c9302c; font-size: 18px; }
.ec-ff-lives .is-lost { color: #b9c0cc; }

.ec-ff-well { position: relative; height: 440px; overflow: hidden; border: 1px solid var(--ec-line); border-bottom: 6px solid var(--t-ink); border-radius: 14px 14px 6px 6px;
	background: linear-gradient(180deg, var(--t-bg), var(--ec-surface) 75%); }
.ec-ff-well.is-hit { animation: ec-ff-hit .5s ease; }
@keyframes ec-ff-hit { 0%, 100% { background-color: transparent; } 30% { background-color: var(--ec-red-soft); } }

/* the falling clue (moved with transform: translateY by the script) */
.ec-ff-drop { position: absolute; top: 0; left: 0; display: grid; justify-items: center; gap: 6px; width: max-content; max-width: min(300px, 86%);
	padding: 12px 16px; border: 2px solid var(--t-ink); border-radius: 12px; background: var(--ec-surface); box-shadow: 0 6px 16px rgba(34, 35, 45, .14);
	text-align: center; will-change: transform; }
.ec-ff-drop:empty { display: none; }
.ec-ff-drop p { margin: 0; font: 500 22px/1.3 "Rubik", "Lato", sans-serif; color: var(--ec-ink); overflow-wrap: anywhere; }
.ec-ff-drop img { display: block; max-width: 100%; max-height: 130px; border-radius: 8px; object-fit: contain; }
.ec-ff-html { font: 500 20px/1.3 "Rubik", "Lato", sans-serif; overflow-wrap: anywhere; }
.ec-ff-html p { font: inherit; }
.ec-ff-html p + p { margin-top: 4px; }
.ec-ff-drop.is-caught { border-color: var(--ec-green); background: var(--ec-green-soft); animation: ec-ff-pop .6s ease forwards; }
@keyframes ec-ff-pop { 40% { scale: 1.08; opacity: 1; } 100% { scale: .6; opacity: 0; } }
.ec-ff-drop.is-landed { border-color: var(--ec-red); background: var(--ec-red-soft); }
.ec-ff-drop .ec-ff-was { justify-self: stretch; padding-top: 6px; border-top: 1px dashed var(--ec-red); font-size: 18px; font-weight: 600; color: var(--ec-red-hover); }
.ec-ff-drop.is-hidden { visibility: hidden; }

.ec-ff-banner { position: absolute; inset: 40% 0 auto; margin: 0; text-align: center; font: 600 28px "Rubik", sans-serif; color: var(--t-ink); pointer-events: none; }
.ec-ff-banner.is-on { animation: ec-ff-banner 1.8s ease forwards; }
@keyframes ec-ff-banner { 0% { opacity: 0; transform: scale(.8); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ec-ff-paused { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; text-align: center; background: rgba(255, 255, 255, .85); }
.ec-ff-paused[hidden] { display: none; }
.ec-ff-paused p { margin: 0; font: 600 26px "Rubik", sans-serif; }

/* a phone while playing: the game fills the visible screen (top and height set by the script from the visual viewport) */
.ec-ff-run.is-full { position: fixed; left: 0; right: 0; top: 0; z-index: 1040; display: flex; flex-direction: column; max-width: none; margin: 0;
	padding: 8px 12px 4px; background: var(--ec-surface); overscroll-behavior: contain; }
.ec-ff-run.is-full .ec-ff-well { flex: 1 1 auto; min-height: 120px; }
.ec-ff-run.is-full .ec-ff-note { margin-top: 4px; }
.ec-ff-lock, .ec-ff-lock body { overflow: hidden; }

/* ---- answering */
.ec-ff-typed { display: flex; gap: 8px; margin-top: 10px; }
.ec-ff-typed[hidden] { display: none; }
.ec-ff-typed .ec-input { flex: 1; min-width: 0; font-size: 20px; }
.ec-ff-typed.is-shake { animation: ec-ff-shake .35s ease; }
@keyframes ec-ff-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.ec-ff-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ec-ff-choices[hidden] { display: none; }
.ec-ff-choice { min-height: 52px; padding: 8px 12px; border: 2px solid var(--ec-line); border-radius: 10px; background: var(--ec-surface);
	font: 500 19px/1.25 "Rubik", "Lato", sans-serif; color: var(--ec-ink); overflow-wrap: anywhere; cursor: pointer; }
.ec-ff-choice:hover:not(:disabled) { border-color: var(--t-ink); background: var(--t-bg); }
.ec-ff-choice:focus-visible { outline: 3px solid var(--ec-focus); outline-offset: 2px; }
.ec-ff-choice.is-right { border-color: var(--ec-green); background: var(--ec-green-soft); }
.ec-ff-choice.is-wrong { border-color: #e3b7b5; color: #8a8f9c; text-decoration: line-through; cursor: default; }
.ec-ff-choice.is-key { border-color: var(--ec-ink); border-style: dashed; }
.ec-ff-choice:disabled { cursor: default; }
.ec-ff-note { min-height: 1.5em; margin: 8px 0 0; text-align: center; font-weight: 700; }
.ec-ff-note.is-right { color: var(--ec-green-ink); }
.ec-ff-note.is-wrong { color: var(--ec-red-hover); }

/* ---- the end */
.ec-ff-final { font-size: 18px; }
.ec-ff-final b { display: block; font: 600 54px/1.1 "Rubik", sans-serif; color: var(--t-ink); }
.ec-ff-missed { width: 100%; margin-top: 8px; text-align: left; }
.ec-ff-missed[hidden] { display: none; }
.ec-ff-missed h3 { margin: 0 0 8px; font: 600 18px "Rubik", sans-serif; text-align: center; }
.ec-ff-missed ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ec-ff-missed li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--ec-surface-2); }
.ec-ff-missed li > div { flex: 1; min-width: 0; }
.ec-ff-missed li > img { flex: none; width: 64px; height: 64px; border-radius: 6px; object-fit: cover; }
.ec-ff-missed b { display: block; font: 600 19px "Rubik", sans-serif; color: var(--t-ink); overflow-wrap: anywhere; }
.ec-ff-missed .ec-ff-q { color: var(--ec-ink); overflow-wrap: anywhere; }
.ec-ff-missed .ec-ff-q p { margin: 0; color: inherit; }
.ec-ff-missed .ec-ff-q img { display: block; max-width: 140px; max-height: 80px; object-fit: contain; }

@media (max-width: 640px){
	.ec-ff-card { padding: 20px 16px; }
	.ec-ff-bar { gap: 4px 10px; }
	.ec-ff-score b { font-size: 20px; }
	.ec-ff-lives { font-size: 15px; }
	.ec-ff-drop p { font-size: 19px; }
	.ec-ff-drop img { max-height: 90px; }
	.ec-ff-choice { min-height: 46px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce){
	.ec-ff-well.is-hit, .ec-ff-typed.is-shake, .ec-ff-banner.is-on { animation: none; }
	.ec-ff-drop.is-caught { animation: none; opacity: .4; }
}