/* Fix My Sentence — the repair-and-transfer mode on /games/grammar-gauntlet.
   Shares the gauntlet's slate → cyan palette; everything here is prefixed fm-.
   Effects are chrome: pointer-events:none, spawned inside the stage, off under reduced motion. */

.fm-stage[hidden], #ggClassicCard[hidden] { display: none !important; }
.fm-stage [hidden] { display: none !important; }

.fm-stage {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.fm-btn-primary {
    background: linear-gradient(135deg, #0e7490, #06b6d4);
    border: none;
    color: #fff;
    font-weight: 600;
    min-height: 44px;
}
.fm-btn-primary:active { transform: scale(.98); color: #fff; }
.fm-btn-primary:disabled { opacity: .55; color: #fff; }
@media (hover: hover) {
    .fm-btn-primary:hover:enabled { background: linear-gradient(135deg, #155e75, #0e7490); color: #fff; }
}

.fm-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.fm-streak { font-weight: 700; color: #c2410c; min-height: 1.5em; }

.fm-meter { display: flex; gap: .35rem; list-style: none; padding: 0; margin: .25rem 0 .75rem; }
.fm-meter li {
    flex: 1 1 0;
    display: flex;
    gap: 2px;
    height: .6rem;
}
.fm-meter li span { flex: 1 1 0; border-radius: 3px; background: var(--bs-secondary-bg); }
.fm-meter li span.clean { background: #16a34a; }
.fm-meter li span.helped { background: #f59e0b; }
.fm-meter li span.missed { background: #dc2626; }
.fm-meter li span.now { background: #06b6d4; }

.fm-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0; }
.fm-toolbar .btn { min-height: 44px; }
.fm-toolbar .btn[aria-pressed="true"] { background: #0e7490; border-color: #0e7490; color: #fff; }

.fm-card { position: relative; padding: 1rem; border-radius: .75rem; background: var(--bs-tertiary-bg); }
.fm-card.fm-shake { animation: fm-shake .4s ease; }
.fm-step { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #0e7490; }
.fm-prompt { font-size: 1.1rem; font-weight: 600; }

/* The tiles. A slot sits before every tile and after the last; slots only show while a tile is held. */
.fm-tiles { display: flex; flex-wrap: wrap; align-items: stretch; gap: .15rem; min-height: 4.2rem; margin: .5rem 0; }
.fm-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    min-height: 3.6rem;
    padding: .3rem .6rem;
    border: 2px solid var(--bs-border-color);
    border-radius: .6rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 1.45rem;
    line-height: 1.1;
    touch-action: manipulation;
    transition: transform .12s ease, border-color .12s ease, background-color .12s ease;
}
.fm-tile .fm-py { font-size: .72rem; color: var(--bs-secondary-color); margin-top: .15rem; }
.fm-stage.fm-no-pinyin .fm-py { display: none; }
.fm-tile:active:enabled { transform: scale(.95); }
.fm-tile[aria-pressed="true"] { border-color: #0e7490; background: #cffafe; transform: translateY(-4px); box-shadow: 0 4px 10px rgba(14, 116, 144, .25); }
.fm-tile.fm-locked { border-style: dashed; opacity: .85; cursor: default; }
.fm-tile.fm-locked::after { content: "\f023"; font-family: FontAwesome; font-size: .6rem; color: var(--bs-secondary-color); }
.fm-tile.fm-off { border-color: #dc2626; background: #fee2e2; color: #7f1d1d; }
.fm-tile.fm-on { border-color: #16a34a; background: #dcfce7; color: #14532d; }
.fm-tile.fm-moved { animation: fm-bump .25s ease; }
.fm-tile.fm-pop { animation: fm-pop .45s ease; }
@media (hover: hover) {
    .fm-tile:hover:enabled:not(.fm-locked) { border-color: #06b6d4; }
}

.fm-slot {
    width: .55rem;
    min-height: 3.6rem;
    padding: 0;
    border: 0;
    border-radius: .3rem;
    background: transparent;
    color: transparent;
}
.fm-tiles.fm-holding .fm-slot {
    width: 1.6rem;
    background: rgba(6, 182, 212, .12);
    border: 2px dashed #06b6d4;
    color: #0e7490;
    font-weight: 700;
}
.fm-tiles.fm-holding .fm-slot:disabled { visibility: hidden; width: .55rem; }
.fm-end { align-self: center; font-size: 1.45rem; padding: 0 .2rem; }

.fm-pattern { background: rgba(6, 182, 212, .1); border-radius: .5rem; padding: .5rem .75rem; margin-bottom: .5rem; }
.fm-pattern ul { margin: 0; padding-left: 1.1rem; }

.fm-reveal { margin-top: 1rem; padding: 1rem; border-radius: .75rem; border: 1px solid var(--bs-border-color); }
.fm-reveal.fm-ok { border-color: #16a34a; }
.fm-reveal.fm-bad { border-color: #dc2626; }
.fm-answer { font-size: 1.6rem; }
.fm-rule { background: rgba(6, 182, 212, .1); border-radius: .5rem; padding: .6rem .8rem; }
.fm-rule u { text-decoration-color: #0e7490; text-decoration-thickness: 2px; }

.fm-rules li { margin-bottom: .5rem; }

.fm-onward { display: flex; flex-wrap: wrap; gap: .5rem; }
.fm-onward a, .fm-onward button {
    flex: 1 1 11rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    text-align: left;
    text-decoration: none;
    font-size: .85rem;
    line-height: 1.25;
    color: #0e7490;
    background: rgba(14, 116, 144, .08);
    border: 1px solid rgba(14, 116, 144, .2);
    border-radius: .6rem;
    padding: .55rem .7rem;
    min-height: 44px;
}
.fm-onward strong { display: block; color: #0f172a; }
@media (hover: hover) {
    .fm-onward a:hover, .fm-onward button:hover { background: rgba(14, 116, 144, .16); }
}

.fm-stage :focus-visible { outline: 3px solid #0ea5e9; outline-offset: 2px; }
.fm-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Effects: unclickable, inside the stage, gone under reduced motion. */
.fm-burst, .fm-float, .fm-confetti { position: absolute; pointer-events: none; z-index: 3; }
.fm-burst { width: 8px; height: 8px; border-radius: 50%; animation: fm-burst .7s ease-out forwards; }
.fm-float { font-weight: 800; color: #16a34a; animation: fm-float 1s ease-out forwards; white-space: nowrap; }
.fm-confetti { top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: fm-fall 1.6s ease-in forwards; }

@keyframes fm-burst { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes fm-float { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-48px); opacity: 0; } }
@keyframes fm-fall { to { transform: translate(var(--dx), 420px) rotate(540deg); opacity: 0; } }
@keyframes fm-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes fm-bump { 50% { transform: scale(1.08); } }
@keyframes fm-pop { 40% { transform: scale(1.15); } }

[data-bs-theme="dark"] .fm-step { color: #67e8f9; }
[data-bs-theme="dark"] .fm-streak { color: #fdba74; }
[data-bs-theme="dark"] .fm-tile[aria-pressed="true"] { background: #164e63; border-color: #22d3ee; color: #fff; }
[data-bs-theme="dark"] .fm-tile.fm-off { background: #542027; border-color: #ff8d9a; color: #ffd0d5; }
[data-bs-theme="dark"] .fm-tile.fm-on { background: #123f32; border-color: #75d9ac; color: #b7f7da; }
[data-bs-theme="dark"] .fm-toolbar .btn[aria-pressed="true"] { background: #0e7490; border-color: #22d3ee; color: #fff; }
[data-bs-theme="dark"] .fm-tiles.fm-holding .fm-slot { color: #67e8f9; border-color: #22d3ee; background: rgba(6, 182, 212, .16); }
[data-bs-theme="dark"] .fm-onward a, [data-bs-theme="dark"] .fm-onward button { color: #67e8f9; background: rgba(6, 182, 212, .12); border-color: rgba(6, 182, 212, .3); }
[data-bs-theme="dark"] .fm-onward strong { color: #e2e8f0; }
[data-bs-theme="dark"] .fm-float { color: #4ade80; }

@media (prefers-reduced-motion: reduce) {
    .fm-stage *, .fm-stage *::before, .fm-stage *::after { animation: none !important; transition: none !important; }
    .fm-burst, .fm-float, .fm-confetti { display: none; }
    .fm-tile[aria-pressed="true"], .fm-tile:active:enabled, .fm-btn-primary:active { transform: none; }
}