.mouse-mission { max-width: 1050px; margin: auto; padding: 1.25rem; }
.mouse-mission [hidden] { display: none !important; }
.mouse-mission [data-message]:not(:empty) {
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin: .85rem auto;
    padding: .6rem 1rem;
    border: 1px solid #69badb;
    border-radius: .55rem;
    background: #e8f8ff;
    color: #155370;
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
}
[data-theme="dark"] .mouse-mission [data-message]:not(:empty) {
    background: #163246;
    color: #b4ebff;
    border-color: #387b9c;
}
.mouse-mission__entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
    gap: clamp(1rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1rem, 4vw, 2.5rem);
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(90deg, #0c1836d9, #0c183626 52%, #0c1836ab),
        #14264b url('../images/games/missao-rato-palco.png') center / cover no-repeat;
}
.mouse-mission__hero { display: grid; align-content: center; color: inherit; grid-column: 1; grid-row: 1; }
.mouse-mission__hero img { display: block; width: 100%; max-width: 390px; aspect-ratio: 1; object-fit: contain; border-radius: 18px; }
.mouse-mission__hero h1 { color: inherit; margin: 0; font-size: clamp(2rem, 5vw, 3.6rem); }
.mouse-mission__hero p { max-width: 25ch; margin: .4rem 0; }
.mouse-mission__eyebrow { font-size: .75rem; font-weight: 800; letter-spacing: .09em; }
.mouse-mission__setup, .mouse-mission [data-play] { margin-top: 1rem; padding: 1rem; border: 1px solid var(--portal-border, #a0b1c9); border-radius: 18px; }
.mouse-mission__entry .mouse-mission__setup {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    border-color: #789bc27a;
    background: #10213bef;
    box-shadow: 0 14px 35px #060d2290;
}
.mouse-mission__setup h2 { margin: 0 0 .85rem; color: inherit; }
.mouse-mission__entry .mouse-mission__modes { grid-template-columns: 1fr; }
.mouse-mission__entry [data-start] { width: 100%; margin-top: .4rem; background: #246bc1; font-weight: 700; }
@media (max-width: 680px) {
    .mouse-mission__entry { grid-template-columns: 1fr; background-position: 64% center; }
    .mouse-mission__hero, .mouse-mission__entry .mouse-mission__setup { grid-column: 1; grid-row: auto; }
    .mouse-mission__hero img { max-width: 220px; }
}
.mouse-mission__modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); gap: .75rem; }
.mouse-mission__modes label { display: grid; grid-template-columns: auto 1fr; gap: .35rem .6rem; padding: .85rem; border: 1px solid #7793b0; border-radius: 12px; cursor: pointer; }
.mouse-mission__modes label:has(:checked) { outline: 2px solid #2879e5; }
.mouse-mission__modes span { grid-column: 2; }
.mouse-mission__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-block: .8rem; }
.mouse-mission [data-play] > .mouse-mission__controls { align-self: stretch; }
.mouse-mission [data-fullscreen] { display: inline-grid; place-items: center; margin-left: auto; width: 2.6rem; height: 2.6rem; padding: .4rem; font-size: 1.25rem; }
.mouse-mission button, .mouse-mission select { padding: .5rem .8rem; border-radius: .65rem; font: inherit; }
.mouse-mission button { background: #1753a2; color: white; border: 1px solid #1753a2; cursor: pointer; }
.mouse-mission button:focus-visible, .mouse-mission select:focus-visible { outline: 3px solid #e7a528; outline-offset: 3px; }
.mouse-mission canvas { display: block; width: 100%; height: auto; background: #101c39; border-radius: 14px; touch-action: none; }
.mouse-mission canvas.is-target { cursor: crosshair; }
.mouse-mission canvas.is-maze { cursor: grab; }
.mouse-mission__stage { position: relative; display: grid; width: 100%; }
.mouse-mission__stage > canvas { grid-area: 1 / 1; align-self: center; }
.mouse-mission__points {
    position: absolute;
    z-index: 1;
    top: .7rem;
    right: .7rem;
    min-width: 78px;
    padding: .45rem .9rem;
    border: 2px solid #ffd46d;
    border-radius: 14px;
    background: #13264bed;
    color: #ffe59d;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 3px 18px #07152b80;
}
.mouse-mission__points span { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .08em; }
.mouse-mission__points strong { display: block; font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.15; font-variant-numeric: tabular-nums; }
.mouse-mission__points small { position: absolute; inset: auto 0 -1.6rem; font-size: 1.1rem; font-weight: 800; opacity: 0; color: #fff0a6; }
.mouse-mission__points.is-scoring { animation: mouse-score-pop .45s ease-out; }
.mouse-mission__points.is-scoring small { animation: mouse-score-gain .8s ease-out forwards; }
.mouse-mission__result { z-index: 2; }
@keyframes mouse-score-pop {
    0%, 100% { transform: scale(1); }
    35% { transform: scale(1.18); box-shadow: 0 0 24px #ffce7080; }
}
@keyframes mouse-score-gain {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-35px); }
}
@media (prefers-reduced-motion: reduce) {
    .mouse-mission__points.is-scoring, .mouse-mission__points.is-scoring small { animation: none; }
}
.mouse-mission__result {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    padding: .75rem;
    border-radius: 14px;
    background: #0a1734bb;
    color: #fff;
    text-align: center;
}
.mouse-mission__result > div { padding: clamp(.6rem, 3vw, 1.6rem); border: 1px solid #83b8f3; border-radius: 18px; background: #14294f; }
.mouse-mission__result h2 { margin: .2rem 0; color: #fff; }
.mouse-mission__result p { margin: .3rem 0 .55rem; }
.mouse-mission [data-play]:fullscreen .mouse-mission__stage { width: min(100%, 128vh); }
.mouse-mission [data-play]:fullscreen .mouse-mission__stage canvas { width: 100%; }
.mouse-mission__entry-footer { grid-column: 1 / -1; }
.mouse-mission__back { display: inline-flex; padding: .55rem .85rem; border: 1px solid #88afd6; border-radius: .65rem; background: #10213b; color: #e0f2ff; text-decoration: none; }
.mouse-mission__difficulty { display: flex; flex-wrap: wrap; gap: .45rem; border: 0; padding: 0; margin: 0; }
.mouse-mission__difficulty legend { margin-bottom: .35rem; font-weight: 700; }
.mouse-mission__difficulty label { padding: .42rem .7rem; border: 1px solid #7898be; border-radius: 99px; cursor: pointer; }
.mouse-mission__difficulty label:has(:checked) { background: #1753a2; color: #fff; }
.mouse-mission__footer { justify-content: flex-end; }
.mouse-mission [data-play]:fullscreen { display: flex; flex-direction: column; align-items: center; margin: 0; border: 0; border-radius: 0; background: #101c39; color: #fff; overflow: auto; }
.mouse-mission [data-play]:fullscreen canvas { width: auto; max-width: 100%; max-height: 72vh; object-fit: contain; }
.mouse-mission [data-play]:fullscreen a { color: #b9eaff; }
.mouse-mission [data-levels] { color: #bc7900; font-weight: 800; letter-spacing: .18em; }
.mouse-mission [data-play]:fullscreen [data-levels] { color: #ffce70; }