.ew-games-shell{
    --game-bg:#030814;
    --game-panel:#071426;
    --game-panel-2:#0b2036;
    --game-cyan:#55edff;
    --game-blue:#367bff;
    --game-pink:#ff4fd8;
    --game-gold:#ffcc70;
    --game-red:#ff496f;
    --game-green:#65ffb2;
    --game-text:#e9f8ff;
    --game-muted:#7896b4;

    margin-top:28px;
}

.ew-games-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:18px;
}

.ew-games-eyebrow{
    color:#9b7b50;
    font-size:11px;
    font-weight:950;
    letter-spacing:.19em;
}

.ew-games-head h2{
    margin:5px 0 0;
    color:#17263d;
    font-size:30px;
    line-height:1;
    font-weight:1000;
    letter-spacing:-.04em;
}

.ew-games-head p{
    max-width:720px;
    margin:10px 0 0;
    color:#64748b;
    font-size:14px;
    line-height:1.65;
}

.ew-game-version{
    flex:0 0 auto;
    border:1px solid rgba(23,38,61,.13);
    border-radius:999px;
    padding:9px 13px;
    background:#fff;
    color:#17263d;
    box-shadow:0 8px 22px rgba(23,38,61,.06);
    font-size:9px;
    font-weight:950;
    letter-spacing:.14em;
}

.ew-game-frame{
    overflow:hidden;
    border:1px solid rgba(57,114,171,.28);
    border-radius:27px;
    background:#030814;
    box-shadow:
        0 35px 90px rgba(2,9,21,.27),
        0 0 0 1px rgba(85,237,255,.035);
}

.ew-game-hud{
    position:relative;
    z-index:4;
    display:grid;
    grid-template-columns:minmax(0,1fr) repeat(3,105px);
    gap:1px;
    background:rgba(88,196,255,.09);
    border-bottom:1px solid rgba(85,237,255,.10);
}

.ew-hud-block{
    min-width:0;
    padding:13px 17px;
    background:
        linear-gradient(
            180deg,
            rgba(10,32,56,.97),
            rgba(5,19,35,.97)
        );
}

.ew-hud-block > span{
    display:block;
    color:#668aaa;
    font-size:8px;
    font-weight:950;
    letter-spacing:.19em;
}

.ew-hud-block strong{
    display:block;
    margin-top:3px;
    overflow:hidden;
    color:#f3fbff;
    font-size:14px;
    font-weight:950;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ew-hud-compact{
    text-align:center;
}

.ew-mission-row{
    display:flex;
    align-items:center;
    gap:10px;
}

.ew-mission-row strong{
    min-width:0;
    flex:1;
}

.ew-speak-button{
    display:grid;
    width:31px;
    height:31px;
    flex:0 0 auto;
    place-items:center;
    border:1px solid rgba(85,237,255,.2);
    border-radius:10px;
    cursor:pointer;
    background:rgba(85,237,255,.07);
    color:#55edff;
    transition:.18s ease;
}

.ew-speak-button:hover{
    border-color:rgba(85,237,255,.52);
    background:rgba(85,237,255,.14);
    box-shadow:0 0 20px rgba(85,237,255,.12);
}

.ew-speak-button svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.ew-canvas-wrap{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#030814;
}

#ewMetroCanvas{
    display:block;
    width:100%;
    height:100%;
    touch-action:none;
}

.ew-game-start,
.ew-game-result{
    position:absolute;
    inset:0;
    z-index:20;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:28px;
    text-align:center;
    background:
        radial-gradient(circle at 50% 47%, rgba(30,101,174,.34), transparent 31%),
        radial-gradient(circle at 72% 22%, rgba(255,79,216,.08), transparent 24%),
        linear-gradient(135deg, rgba(2,7,16,.95), rgba(3,15,29,.91));
    backdrop-filter:blur(10px);
}

.ew-game-result[hidden]{
    display:none;
}

.ew-start-mark{
    display:grid;
    width:62px;
    height:62px;
    place-items:center;
    transform:rotate(45deg);
    border:1px solid rgba(85,237,255,.42);
    border-radius:17px;
    background:rgba(85,237,255,.065);
    box-shadow:
        0 0 34px rgba(85,237,255,.12),
        inset 0 0 22px rgba(85,237,255,.04);
}

.ew-start-mark span{
    transform:rotate(-45deg);
    color:#fff;
    font-size:18px;
    font-weight:1000;
}

.ew-start-kicker,
.ew-result-kicker{
    margin-top:19px;
    color:#55edff;
    font-size:9px;
    font-weight:950;
    letter-spacing:.24em;
}

.ew-game-start h3,
.ew-game-result h3{
    margin:8px 0 0;
    color:#f5fbff;
    font-size:clamp(36px,6vw,72px);
    line-height:.82;
    font-weight:1000;
    letter-spacing:-.065em;
    text-shadow:0 0 36px rgba(85,237,255,.08);
}

.ew-game-start p{
    max-width:550px;
    margin:19px auto 0;
    color:#99afc5;
    font-size:13px;
    line-height:1.7;
}

.ew-start-stats{
    display:grid;
    grid-template-columns:repeat(2,minmax(130px,1fr));
    gap:8px;
    margin-top:20px;
}

.ew-start-stats > div{
    padding:10px 16px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:13px;
    background:rgba(255,255,255,.025);
}

.ew-start-stats span,
.ew-result-grid span{
    display:block;
    color:#65809b;
    font-size:8px;
    font-weight:950;
    letter-spacing:.15em;
}

.ew-start-stats strong{
    display:block;
    margin-top:2px;
    color:#d9f8ff;
    font-size:14px;
    font-weight:950;
}

#ewStartButton,
#ewRestartButton{
    min-width:220px;
    margin-top:21px;
    border:1px solid rgba(85,237,255,.40);
    border-radius:14px;
    padding:13px 24px;
    cursor:pointer;
    background:
        linear-gradient(135deg,rgba(46,210,238,.95),rgba(46,115,255,.95));
    color:white;
    box-shadow:
        0 12px 34px rgba(36,150,255,.19),
        0 0 26px rgba(85,237,255,.10);
    transition:.18s ease;
}

#ewStartButton span{
    display:block;
    font-size:12px;
    font-weight:1000;
    letter-spacing:.13em;
}

#ewStartButton small{
    display:block;
    margin-top:2px;
    color:rgba(255,255,255,.72);
    font-size:7px;
    font-weight:850;
    letter-spacing:.15em;
}

#ewStartButton:hover,
#ewRestartButton:hover{
    transform:translateY(-2px) scale(1.015);
    filter:brightness(1.08);
}

.ew-controls-hint{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:7px;
    margin-top:13px;
}

.ew-controls-hint span{
    padding:5px 8px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:999px;
    color:#5f7994;
    background:rgba(255,255,255,.018);
    font-size:7px;
    font-weight:900;
    letter-spacing:.10em;
}

.ew-stars{
    display:flex;
    gap:7px;
    margin-top:12px;
}

.ew-stars span{
    color:#31465c;
    font-size:34px;
    text-shadow:none;
    transition:.2s ease;
}

.ew-stars span.active{
    color:#ffcc70;
    text-shadow:0 0 24px rgba(255,204,112,.42);
}

.ew-game-result h3{
    max-width:700px;
    font-size:clamp(31px,4vw,55px);
    line-height:.95;
}

.ew-result-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(90px,1fr));
    gap:7px;
    width:min(620px,100%);
    margin-top:22px;
}

.ew-result-grid > div{
    padding:12px 10px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:13px;
    background:rgba(255,255,255,.025);
}

.ew-result-grid strong{
    display:block;
    margin-top:4px;
    color:#f4fbff;
    font-size:18px;
    font-weight:1000;
}

.ew-record-banner{
    margin-top:13px;
    border:1px solid rgba(255,204,112,.35);
    border-radius:999px;
    padding:7px 13px;
    color:#ffcc70;
    background:rgba(255,204,112,.07);
    box-shadow:0 0 25px rgba(255,204,112,.08);
    font-size:9px;
    font-weight:1000;
    letter-spacing:.17em;
}

.ew-record-banner[hidden]{
    display:none;
}

#ewRestartButton{
    min-width:180px;
    padding:13px 20px;
    font-size:10px;
    font-weight:1000;
    letter-spacing:.13em;
}

.ew-mobile-pad{
    position:absolute;
    right:17px;
    bottom:17px;
    z-index:15;
    display:none;
    width:150px;
    user-select:none;
}

.ew-mobile-pad > button{
    display:block;
    margin:0 auto 5px;
}

.ew-mobile-pad > div{
    display:flex;
    justify-content:center;
    gap:5px;
}

.ew-mobile-pad button{
    width:45px;
    height:45px;
    border:1px solid rgba(85,237,255,.18);
    border-radius:14px;
    background:rgba(3,15,29,.69);
    color:#c6f8ff;
    box-shadow:0 0 18px rgba(85,237,255,.045);
    backdrop-filter:blur(8px);
    touch-action:none;
    font-size:13px;
}

.ew-mobile-pad button:active{
    background:rgba(85,237,255,.18);
}

.ew-game-footer{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    padding:11px 13px;
    border-top:1px solid rgba(85,237,255,.07);
    background:#061425;
}

.ew-game-footer span{
    border:1px solid rgba(255,255,255,.055);
    border-radius:999px;
    padding:5px 8px;
    color:#607d9a;
    font-size:7px;
    font-weight:900;
    letter-spacing:.09em;
}

@media(pointer:coarse),(max-width:820px){
    .ew-games-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .ew-game-version{
        display:none;
    }

    .ew-game-hud{
        grid-template-columns:minmax(0,1fr) 63px 63px 63px;
    }

    .ew-hud-block{
        padding:9px 8px;
    }

    .ew-hud-block strong{
        font-size:10px;
    }

    .ew-speak-button{
        width:27px;
        height:27px;
    }

    .ew-mobile-pad{
        display:block;
    }

    .ew-game-start,
    .ew-game-result{
        padding:18px 15px 90px;
    }
}

@media(max-width:540px){
    .ew-game-frame{
        border-radius:19px;
    }

    .ew-games-head h2{
        font-size:25px;
    }

    .ew-canvas-wrap{
        min-height:500px;
        aspect-ratio:auto;
    }

    .ew-game-start h3{
        font-size:43px;
    }

    .ew-start-mark{
        width:49px;
        height:49px;
    }

    .ew-result-grid{
        grid-template-columns:repeat(2,1fr);
        max-width:320px;
    }

    .ew-mobile-pad{
        right:10px;
        bottom:10px;
    }

    .ew-game-footer{
        display:none;
    }
}


/* Metro Mission V8 ? master audio control */

.ew-audio-toggle{
    display:grid;
    width:31px;
    height:31px;
    flex:0 0 auto;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,211,74,.25);
    border-radius:9px;
    background:rgba(255,211,74,.07);
    color:#ffd34a;
    cursor:pointer;
    transition:.18s ease;
}

.ew-audio-toggle:hover{
    border-color:rgba(255,211,74,.65);
    background:rgba(255,211,74,.15);
    box-shadow:0 0 20px rgba(255,211,74,.16);
}

.ew-audio-toggle svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.ew-audio-toggle .ew-audio-off{
    display:none;
}

.ew-audio-toggle.is-muted{
    border-color:rgba(255,100,100,.42);
    background:rgba(255,100,100,.09);
    color:#ff7373;
}

.ew-audio-toggle.is-muted .ew-audio-on{
    display:none;
}

.ew-audio-toggle.is-muted .ew-audio-off{
    display:block;
}

.ew-speak-button:disabled{
    opacity:.32;
    cursor:not-allowed;
}

@media (max-width:700px){
    .ew-audio-toggle{
        width:27px;
        height:27px;
    }

    .ew-audio-toggle svg{
        width:15px;
        height:15px;
    }
}

/* Metro Mission V9 ? exit */

.ew-game-head-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.ew-exit-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:34px;
    padding:0 12px;
    border:1px solid rgba(255,105,105,.28);
    border-radius:10px;
    background:rgba(255,80,80,.06);
    color:#ff8b8b;
    cursor:pointer;
    font-size:10px;
    letter-spacing:.12em;
    transition:.18s ease;
}

.ew-exit-button span{
    font-size:20px;
    line-height:1;
    font-weight:400;
}

.ew-exit-button strong{
    font-size:9px;
    font-weight:900;
}

.ew-exit-button:hover{
    border-color:rgba(255,105,105,.68);
    background:rgba(255,80,80,.14);
    box-shadow:0 0 22px rgba(255,80,80,.12);
    transform:translateY(-1px);
}

@media (max-width:700px){
    .ew-exit-button{
        min-height:31px;
        padding:0 9px;
    }

    .ew-exit-button strong{
        display:none;
    }
}
/* Metro Mission V12 ? pause / play */

.ew-pause-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:34px;
    padding:0 11px;
    border:1px solid rgba(85,237,255,.30);
    border-radius:10px;
    background:rgba(85,237,255,.07);
    color:#72efff;
    cursor:pointer;
    font-size:10px;
    letter-spacing:.10em;
    transition:.18s ease;
}

.ew-pause-button:hover{
    border-color:rgba(85,237,255,.72);
    background:rgba(85,237,255,.15);
    box-shadow:0 0 20px rgba(85,237,255,.13);
    transform:translateY(-1px);
}

.ew-pause-button.is-paused{
    border-color:rgba(92,235,145,.55);
    background:rgba(92,235,145,.11);
    color:#6eeda2;
}

.ew-pause-symbol{
    min-width:14px;
    font-size:15px;
    line-height:1;
    font-weight:900;
    text-align:center;
}

.ew-pause-button strong{
    font-size:9px;
    font-weight:900;
}

@media (max-width:700px){
    .ew-pause-button{
        min-height:31px;
        padding:0 9px;
    }

    .ew-pause-button strong{
        display:none;
    }
}
/* Metro Mission V13 ? HUD action buttons */

.ew-game-head-actions{
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.ew-utility-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.ew-audio-toggle{
    width:40px;
    height:40px;
    border-radius:12px;
}

.ew-audio-toggle svg{
    width:18px;
    height:18px;
}

.ew-pause-button,
.ew-exit-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 14px;
    border-radius:12px;
    cursor:pointer;
    transition:.18s ease;
    font-size:11px;
    letter-spacing:.08em;
    font-weight:900;
    line-height:1;
    white-space:nowrap;
    -webkit-tap-highlight-color: transparent;
}

.ew-pause-button strong,
.ew-exit-button strong{
    display:inline-block;
    font-size:11px;
    font-weight:900;
    line-height:1;
}

.ew-pause-button{
    border:1px solid rgba(80,255,185,.42);
    background:rgba(80,255,185,.18);
    color:#1f7f58;
    box-shadow:0 0 0 1px rgba(31,127,88,.04) inset;
}

.ew-pause-button:hover{
    border-color:rgba(80,255,185,.74);
    background:rgba(80,255,185,.26);
    box-shadow:0 0 22px rgba(80,255,185,.18);
    transform:translateY(-1px);
}

.ew-pause-button.is-paused{
    border-color:rgba(85,237,255,.66);
    background:rgba(85,237,255,.20);
    color:#0a6a7c;
}

.ew-exit-button{
    border:1px solid rgba(255,110,110,.42);
    background:rgba(255,110,110,.15);
    color:#b33434;
    box-shadow:0 0 0 1px rgba(179,52,52,.04) inset;
}

.ew-exit-button:hover{
    border-color:rgba(255,110,110,.72);
    background:rgba(255,110,110,.23);
    box-shadow:0 0 22px rgba(255,110,110,.14);
    transform:translateY(-1px);
}

@media (max-width:700px){
    .ew-utility-actions{
        gap:7px;
        width:100%;
    }

    .ew-audio-toggle{
        width:42px;
        height:42px;
    }

    .ew-pause-button,
    .ew-exit-button{
        min-height:42px;
        padding:0 14px;
        font-size:11px;
    }

    .ew-pause-button strong,
    .ew-exit-button strong{
        font-size:11px;
    }
}
/* Metro Mission V14 ? developer credit */

.ew-game-credit{
    position:absolute;
    right:14px;
    bottom:10px;
    z-index:6;

    padding:5px 8px;
    border-radius:7px;

    background:rgba(2,8,19,.48);
    color:rgba(255,255,255,.58);

    font-size:9px;
    font-weight:600;
    line-height:1;
    letter-spacing:.045em;

    pointer-events:none;
    user-select:none;

    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
}

.ew-game-credit strong{
    color:rgba(255,255,255,.82);
    font-weight:800;
}

@media(max-width:540px){
    .ew-game-credit{
        right:8px;
        bottom:7px;
        padding:4px 6px;
        font-size:8px;
        letter-spacing:.03em;
    }
}
/* Metro Mission V16 pedagogy */
.ew-games-pedagogy{
    margin-top:16px;
    max-width:860px;
}

.ew-games-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px;
}

.ew-games-badges span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 12px;
    border-radius:999px;
    background:#eef4ff;
    color:#17335c;
    border:1px solid rgba(23,51,92,.10);
    font-size:11px;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.ew-games-pedagogy-text{
    margin:0;
    padding:14px 16px;
    border-radius:18px;
    background:#f8fbff;
    border:1px solid rgba(23,51,92,.10);
    color:#38506d;
    font-size:14px;
    line-height:1.7;
}

@media (max-width: 640px){
    .ew-games-pedagogy-text{
        font-size:13px;
        line-height:1.65;
        padding:13px 14px;
    }

    .ew-games-badges span{
        font-size:10px;
        padding:6px 10px;
    }
}
/* Metro Mission V20 stack layout */
.ew-v20-stack-root{
    display:block !important;
    width:100% !important;
    max-width:none !important;
}

.ew-v20-stack-root > *{
    width:100% !important;
    max-width:none !important;
}

.ew-v20-stack-root > * + *{
    margin-top:28px !important;
}

.ew-v20-stack-root .ew-game-frame,
.ew-v20-stack-root .ew-canvas-wrap,
.ew-v20-stack-root canvas{
    width:100% !important;
    max-width:none !important;
}

.ew-v20-stack-root [class*="grid-cols-2"],
.ew-v20-stack-root [class*="lg:grid-cols"],
.ew-v20-stack-root [class*="xl:grid-cols"]{
    grid-template-columns:1fr !important;
}

.ew-v20-stack-root [style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
}

@media (max-width: 900px){
    .ew-v20-stack-root > * + *{
        margin-top:22px !important;
    }
}

/* EW MISSION VOCABULARY V32 */

.ew-mission-vocabulary {
    margin-top: 24px;
    padding: 26px;
    border: 1px solid rgba(85,237,255,.18);
    border-radius: 20px;
    background:
        radial-gradient(
            circle at top right,
            rgba(85,237,255,.10),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(7,24,43,.98),
            rgba(12,37,59,.97)
        );
}

.ew-vocabulary-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.ew-vocabulary-kicker {
    display: inline-block;
    margin-bottom: 8px;
    color: #f4c84a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .15em;
}

.ew-vocabulary-heading h2 {
    margin: 0;
    color: #ffffff !important;
    font-size: clamp(22px,2.4vw,30px);
    font-weight: 900;
}

.ew-vocabulary-heading h2 span {
    color: #55edff;
}

.ew-vocabulary-heading p {
    max-width: 850px;
    margin: 10px 0 0;
    color: #d9e8f2;
    font-size: 14px;
    line-height: 1.65;
}

.ew-vocabulary-count {
    padding: 8px 12px;
    border: 1px solid rgba(244,200,74,.35);
    border-radius: 999px;
    color: #f4c84a;
    background: rgba(244,200,74,.08);
    font-size: 11px;
    font-weight: 900;
}

.ew-vocabulary-grid {
    display: grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap: 14px;
}

.ew-vocabulary-card {
    padding: 18px;
    border: 1px solid rgba(85,237,255,.14);
    border-radius: 12px;
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(10px);
}

.ew-vocabulary-name {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
}

.ew-vocabulary-translation {
    margin-top: 5px;
    color: #55edff;
    font-size: 13px;
    font-weight: 800;
}

.ew-vocabulary-clue,
.ew-vocabulary-example {
    margin-top: 14px;
    padding-top: 12px;
    border-top:
        1px solid rgba(255,255,255,.08);
}

.ew-vocabulary-clue strong,
.ew-vocabulary-example strong {
    display: block;
    margin-bottom: 6px;
    color: #f4c84a;
    font-size: 11px;
    font-weight: 900;
}

.ew-vocabulary-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
}

.ew-vocabulary-clue p {
    color: #e9f3f8;
}

.ew-vocabulary-en {
    color: #fff;
}

.ew-vocabulary-tr {
    margin-top: 5px !important;
    color: #a7edf2;
    font-weight: 700;
}

@media (max-width:720px) {
    .ew-mission-vocabulary {
        padding: 18px;
    }

    .ew-vocabulary-heading {
        flex-direction: column;
    }

    .ew-vocabulary-grid {
        grid-template-columns: 1fr;
    }
}


/* METRO V33 FULLSCREEN HUD BONUSES */

.ew-canvas-wrap {
    position: relative;
}

.ew-fullscreen-button {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 50;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 9px 12px;

    border: 1px solid rgba(85,237,255,.45);
    border-radius: 10px;

    background: rgba(4,20,35,.86);
    color: #fff;

    box-shadow:
        0 8px 22px rgba(0,0,0,.28);

    cursor: pointer;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;

    backdrop-filter: blur(8px);
}

.ew-fullscreen-button svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ew-fullscreen-button:hover {
    border-color: #55edff;
    background: rgba(8,39,60,.95);
}


/* HUD desktop order */

@media (min-width: 900px) {

    .ew-game-hud {
        display: grid !important;

        grid-template-columns:
            minmax(0,1fr)
            145px
            105px
            125px;

        gap: 10px;
        align-items: stretch;
    }

    .ew-hud-mission {
        order: 1;
        min-width: 0;
    }

    .ew-hud-time {
        order: 2;
        min-width: 145px;

        border-color:
            rgba(101,255,178,.34) !important;

        background:
            linear-gradient(
                145deg,
                rgba(19,83,70,.36),
                rgba(6,28,44,.94)
            ) !important;
    }

    .ew-hud-combo {
        order: 3;
    }

    .ew-hud-score {
        order: 4;
    }
}

.ew-hud-time #ewTime {
    display: block;

    font-size: clamp(
        30px,
        3.1vw,
        44px
    ) !important;

    line-height: 1 !important;

    color: #fff !important;

    font-variant-numeric:
        tabular-nums;

    text-shadow:
        0 0 18px
        rgba(101,255,178,.34);
}

.ew-hud-time span {
    color: #8ff6bf !important;
    font-weight: 900 !important;
}


/* fullscreen */

.ew-game-frame:fullscreen {
    width: 100vw;
    height: 100vh;

    margin: 0;
    padding: 12px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    background: #061426;

    overflow: hidden;
}

.ew-game-frame:fullscreen .ew-game-hud {
    flex: 0 0 auto;
}

.ew-game-frame:fullscreen .ew-canvas-wrap {
    flex: 1 1 auto;

    min-height: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

.ew-game-frame:fullscreen #ewMetroCanvas {
    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: calc(100vh - 120px) !important;

    aspect-ratio: 16 / 9;
}

.ew-game-frame:fullscreen .ew-game-footer {
    display: none;
}

.ew-game-frame:fullscreen .ew-fullscreen-button {
    position: fixed;
    right: 20px;
    bottom: 18px;
}

@media (max-width: 720px) {

    .ew-fullscreen-button {
        width: 42px;
        height: 42px;
        padding: 0;
    }

    .ew-fullscreen-button span {
        display: none;
    }
}

/* METRO V34 VOCAB TITLE VISIBILITY FIX */

.ew-mission-vocabulary .ew-vocabulary-heading h2 {
    color: #ffffff !important;
}

.ew-mission-vocabulary .ew-vocabulary-heading h2 span {
    color: #42e9ff !important;
}



/* METRO V35 MOBILE FULLSCREEN */

/*
 * These rules are intentionally mobile-only.
 * Desktop layout remains unchanged.
 */

.ew-mobile-rotate-notice {
    display: none;
}


@media (max-width: 899px), (pointer: coarse) {

    html.ew-mobile-game-open,
    body.ew-mobile-game-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }


    /*
     * Safari/iPhone fallback fullscreen
     */

    .ew-game-frame.ew-mobile-fullscreen {
        position: fixed !important;

        inset: 0 !important;

        z-index: 2147483000 !important;

        width: 100vw !important;
        width: 100dvw !important;

        height: 100vh !important;
        height: 100dvh !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;

        padding:
            max(4px, env(safe-area-inset-top))
            max(4px, env(safe-area-inset-right))
            max(4px, env(safe-area-inset-bottom))
            max(4px, env(safe-area-inset-left))
            !important;

        box-sizing: border-box !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: #061426 !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;

        touch-action: none;
    }


    /*
     * Native mobile fullscreen gets same geometry.
     */

    .ew-game-frame:fullscreen,
    .ew-game-frame:-webkit-full-screen {
        width: 100vw !important;
        width: 100dvw !important;

        height: 100vh !important;
        height: 100dvh !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;

        padding:
            max(4px, env(safe-area-inset-top))
            max(4px, env(safe-area-inset-right))
            max(4px, env(safe-area-inset-bottom))
            max(4px, env(safe-area-inset-left))
            !important;

        border-radius: 0 !important;

        background: #061426 !important;

        overflow: hidden !important;
    }


    /*
     * Compact mobile HUD.
     */

    .ew-game-frame.ew-mobile-fullscreen .ew-game-hud,
    .ew-game-frame:fullscreen .ew-game-hud,
    .ew-game-frame:-webkit-full-screen .ew-game-hud {
        flex: 0 0 auto !important;

        width: 100% !important;

        min-height: 54px !important;

        margin: 0 !important;

        padding: 4px !important;

        box-sizing: border-box !important;

        gap: 5px !important;

        position: relative !important;

        z-index: 20 !important;
    }


    /*
     * Game area uses all remaining height.
     */

    .ew-game-frame.ew-mobile-fullscreen .ew-canvas-wrap,
    .ew-game-frame:fullscreen .ew-canvas-wrap,
    .ew-game-frame:-webkit-full-screen .ew-canvas-wrap {
        flex: 1 1 auto !important;

        width: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
    }


    /*
     * Never distort 1280x720 game canvas.
     */

    .ew-game-frame.ew-mobile-fullscreen #ewMetroCanvas,
    .ew-game-frame:fullscreen #ewMetroCanvas,
    .ew-game-frame:-webkit-full-screen #ewMetroCanvas {
        display: block !important;

        width: auto !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: 100% !important;

        aspect-ratio: 16 / 9 !important;

        margin: auto !important;
    }


    /*
     * Footer is unnecessary while playing.
     */

    .ew-game-frame.ew-mobile-fullscreen .ew-game-footer,
    .ew-game-frame:fullscreen .ew-game-footer,
    .ew-game-frame:-webkit-full-screen .ew-game-footer {
        display: none !important;
    }


    /*
     * Keep fullscreen control reachable.
     */

    .ew-game-frame.ew-mobile-fullscreen .ew-fullscreen-button,
    .ew-game-frame:fullscreen .ew-fullscreen-button,
    .ew-game-frame:-webkit-full-screen .ew-fullscreen-button {
        position: fixed !important;

        right:
            max(
                10px,
                env(safe-area-inset-right)
            )
            !important;

        bottom:
            max(
                10px,
                env(safe-area-inset-bottom)
            )
            !important;

        z-index: 2147483640 !important;
    }


    /*
     * Mobile touch pad must stay above canvas.
     */

    .ew-game-frame.ew-mobile-fullscreen .ew-mobile-pad,
    .ew-game-frame:fullscreen .ew-mobile-pad,
    .ew-game-frame:-webkit-full-screen .ew-mobile-pad {
        z-index: 35 !important;
    }


    /*
     * Portrait notice.
     */

    @media (orientation: portrait) {

        .ew-game-frame.ew-mobile-fullscreen
        .ew-mobile-rotate-notice,

        .ew-game-frame:fullscreen
        .ew-mobile-rotate-notice,

        .ew-game-frame:-webkit-full-screen
        .ew-mobile-rotate-notice {

            position: fixed !important;

            inset: 0 !important;

            z-index: 2147483630 !important;

            display: flex !important;

            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;

            gap: 8px !important;

            padding: 24px !important;

            background:
                rgba(3,17,31,.97) !important;

            color: #ffffff !important;

            text-align: center !important;
        }

        .ew-mobile-rotate-notice
        .ew-rotate-phone-icon {
            font-size: 52px !important;
            line-height: 1 !important;

            color: #55edff !important;
        }

        .ew-mobile-rotate-notice strong {
            font-size: 22px !important;
            font-weight: 900 !important;
        }

        .ew-mobile-rotate-notice span {
            max-width: 280px;

            color: #c9dbe8 !important;

            font-size: 13px !important;
        }
    }


    /*
     * Landscape is the actual gameplay layout.
     */

    @media (orientation: landscape) {

        .ew-game-frame.ew-mobile-fullscreen
        .ew-mobile-rotate-notice,

        .ew-game-frame:fullscreen
        .ew-mobile-rotate-notice,

        .ew-game-frame:-webkit-full-screen
        .ew-mobile-rotate-notice {
            display: none !important;
        }


        .ew-game-frame.ew-mobile-fullscreen,
        .ew-game-frame:fullscreen,
        .ew-game-frame:-webkit-full-screen {
            padding:
                max(2px, env(safe-area-inset-top))
                max(5px, env(safe-area-inset-right))
                max(2px, env(safe-area-inset-bottom))
                max(5px, env(safe-area-inset-left))
                !important;
        }


        .ew-game-frame.ew-mobile-fullscreen
        .ew-game-hud,

        .ew-game-frame:fullscreen
        .ew-game-hud,

        .ew-game-frame:-webkit-full-screen
        .ew-game-hud {
            min-height: 48px !important;
        }


        .ew-game-frame.ew-mobile-fullscreen
        .ew-hud-time #ewTime,

        .ew-game-frame:fullscreen
        .ew-hud-time #ewTime,

        .ew-game-frame:-webkit-full-screen
        .ew-hud-time #ewTime {
            font-size: 26px !important;
        }
    }
}


/* METRO V36 MOBILE GAMEPLAY FIX */

/*
 * MOBILE ONLY.
 * Desktop rules are intentionally untouched.
 */

@media (max-width: 899px), (pointer: coarse) {

    /*
     * Remove old virtual direction pad completely.
     * Touch-to-move canvas control remains active.
     */

    .ew-mobile-pad {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }


    html.ew-mobile-game-open,
    body.ew-mobile-game-open {
        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        overscroll-behavior: none !important;

        background: #061426 !important;
    }


    /*
     * iPhone / Safari pseudo fullscreen.
     */

    body > .ew-game-frame.ew-mobile-fullscreen {
        position: fixed !important;

        inset: 0 !important;

        z-index: 2147483000 !important;

        width: 100vw !important;
        width: 100dvw !important;

        height: 100vh !important;
        height: 100dvh !important;

        min-width: 100vw !important;
        min-height: 100vh !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;

        background: #061426 !important;

        overflow: hidden !important;

        transform: none !important;
    }


    /*
     * Native fullscreen.
     */

    .ew-game-frame:fullscreen,
    .ew-game-frame:-webkit-full-screen {
        width: 100vw !important;
        width: 100dvw !important;

        height: 100vh !important;
        height: 100dvh !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-sizing: border-box !important;

        background: #061426 !important;

        overflow: hidden !important;
    }


    /*
     * Mobile fullscreen HUD.
     */

    body > .ew-game-frame.ew-mobile-fullscreen
    .ew-game-hud,

    .ew-game-frame:fullscreen
    .ew-game-hud,

    .ew-game-frame:-webkit-full-screen
    .ew-game-hud {

        flex: 0 0 auto !important;

        width: 100% !important;

        min-height: 74px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        grid-template-columns:
            minmax(0, 1fr)
            82px
            72px
            92px
            !important;

        gap: 1px !important;
    }


    /*
     * Mission text: substantially more readable.
     */

    body > .ew-game-frame.ew-mobile-fullscreen
    .ew-hud-mission,

    .ew-game-frame:fullscreen
    .ew-hud-mission,

    .ew-game-frame:-webkit-full-screen
    .ew-hud-mission {
        padding: 10px 14px !important;
    }


    body > .ew-game-frame.ew-mobile-fullscreen
    .ew-hud-mission > span,

    .ew-game-frame:fullscreen
    .ew-hud-mission > span,

    .ew-game-frame:-webkit-full-screen
    .ew-hud-mission > span {
        font-size: 10px !important;

        letter-spacing: .18em !important;
    }


    body > .ew-game-frame.ew-mobile-fullscreen
    #ewMission,

    .ew-game-frame:fullscreen
    #ewMission,

    .ew-game-frame:-webkit-full-screen
    #ewMission {
        margin-top: 5px !important;

        font-size: 18px !important;
        line-height: 1.28 !important;

        font-weight: 950 !important;

        white-space: normal !important;

        overflow: visible !important;

        text-overflow: clip !important;
    }


    /*
     * Make score/combo/time readable but compact.
     */

    body > .ew-game-frame.ew-mobile-fullscreen
    .ew-hud-compact,

    .ew-game-frame:fullscreen
    .ew-hud-compact,

    .ew-game-frame:-webkit-full-screen
    .ew-hud-compact {
        padding: 9px 6px !important;
    }


    /*
     * Canvas region consumes ALL remaining viewport.
     */

    body > .ew-game-frame.ew-mobile-fullscreen
    .ew-canvas-wrap,

    .ew-game-frame:fullscreen
    .ew-canvas-wrap,

    .ew-game-frame:-webkit-full-screen
    .ew-canvas-wrap {

        flex: 1 1 0 !important;

        width: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        overflow: hidden !important;

        background: #020c18 !important;
    }


    /*
     * Deliberately stretch the canvas to the complete
     * available mobile gameplay rectangle.
     *
     * Touch coordinates remain correct because game.js
     * maps pointer coordinates using getBoundingClientRect().
     */

    body > .ew-game-frame.ew-mobile-fullscreen
    #ewMetroCanvas,

    .ew-game-frame:fullscreen
    #ewMetroCanvas,

    .ew-game-frame:-webkit-full-screen
    #ewMetroCanvas {

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 100% !important;
        min-height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;

        aspect-ratio: auto !important;
    }


    /*
     * No footer while playing fullscreen.
     */

    body > .ew-game-frame.ew-mobile-fullscreen
    .ew-game-footer,

    .ew-game-frame:fullscreen
    .ew-game-footer,

    .ew-game-frame:-webkit-full-screen
    .ew-game-footer {
        display: none !important;
    }


    /*
     * Fullscreen exit button remains available.
     */

    body > .ew-game-frame.ew-mobile-fullscreen
    .ew-fullscreen-button,

    .ew-game-frame:fullscreen
    .ew-fullscreen-button,

    .ew-game-frame:-webkit-full-screen
    .ew-fullscreen-button {

        position: fixed !important;

        right:
            max(
                8px,
                env(safe-area-inset-right)
            )
            !important;

        bottom:
            max(
                8px,
                env(safe-area-inset-bottom)
            )
            !important;

        z-index: 2147483640 !important;
    }


    /*
     * Landscape gameplay.
     */

    @media (orientation: landscape) {

        body > .ew-game-frame.ew-mobile-fullscreen
        .ew-mobile-rotate-notice,

        .ew-game-frame:fullscreen
        .ew-mobile-rotate-notice,

        .ew-game-frame:-webkit-full-screen
        .ew-mobile-rotate-notice {
            display: none !important;
        }

        body > .ew-game-frame.ew-mobile-fullscreen
        #ewMission,

        .ew-game-frame:fullscreen
        #ewMission,

        .ew-game-frame:-webkit-full-screen
        #ewMission {
            font-size: 18px !important;
        }
    }
}

/* METRO V37 MOBILE FULLSCREEN */

@media (max-width: 899px), (pointer: coarse) {

    html.ew-mobile-game-open,
    body.ew-mobile-game-open {
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #061426 !important;
    }

    body > .ew-game-frame.ew-mobile-fullscreen,
    .ew-game-frame:fullscreen,
    .ew-game-frame:-webkit-full-screen {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        width: 100dvw !important;

        height: 100vh !important;
        height: 100dvh !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        background: #061426 !important;
        overflow: hidden !important;
    }

    body > .ew-game-frame.ew-mobile-fullscreen .ew-game-hud,
    .ew-game-frame:fullscreen .ew-game-hud,
    .ew-game-frame:-webkit-full-screen .ew-game-hud {
        flex: 0 0 54px !important;
        min-height: 54px !important;
        height: 54px !important;

        grid-template-columns:
            minmax(0,1fr)
            92px
            70px
            82px
            !important;

        gap: 1px !important;
    }

    body > .ew-game-frame.ew-mobile-fullscreen .ew-hud-block,
    .ew-game-frame:fullscreen .ew-hud-block,
    .ew-game-frame:-webkit-full-screen .ew-hud-block {
        min-height: 54px !important;
        height: 54px !important;
        padding: 5px 8px !important;
        box-sizing: border-box !important;
    }

    body > .ew-game-frame.ew-mobile-fullscreen .ew-hud-mission,
    .ew-game-frame:fullscreen .ew-hud-mission,
    .ew-game-frame:-webkit-full-screen .ew-hud-mission {
        padding: 5px 10px !important;
    }

    body > .ew-game-frame.ew-mobile-fullscreen .ew-hud-mission > span,
    .ew-game-frame:fullscreen .ew-hud-mission > span,
    .ew-game-frame:-webkit-full-screen .ew-hud-mission > span {
        font-size: 8px !important;
        line-height: 1 !important;
    }

    body > .ew-game-frame.ew-mobile-fullscreen #ewMission,
    .ew-game-frame:fullscreen #ewMission,
    .ew-game-frame:-webkit-full-screen #ewMission {
        margin-top: 2px !important;

        font-size: 15px !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    body > .ew-game-frame.ew-mobile-fullscreen .ew-hud-time #ewTime,
    .ew-game-frame:fullscreen .ew-hud-time #ewTime,
    .ew-game-frame:-webkit-full-screen .ew-hud-time #ewTime {
        font-size: 30px !important;
        line-height: .9 !important;
    }

    body > .ew-game-frame.ew-mobile-fullscreen .ew-canvas-wrap,
    .ew-game-frame:fullscreen .ew-canvas-wrap,
    .ew-game-frame:-webkit-full-screen .ew-canvas-wrap {
        flex: 1 1 0 !important;

        width: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }

    body > .ew-game-frame.ew-mobile-fullscreen #ewMetroCanvas,
    .ew-game-frame:fullscreen #ewMetroCanvas,
    .ew-game-frame:-webkit-full-screen #ewMetroCanvas {
        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;

        aspect-ratio: auto !important;
    }

    .ew-mobile-pad {
        display: none !important;
    }

    body > .ew-game-frame.ew-mobile-fullscreen .ew-fullscreen-button,
    .ew-game-frame:fullscreen .ew-fullscreen-button,
    .ew-game-frame:-webkit-full-screen .ew-fullscreen-button {
        position: fixed !important;

        right: 0 !important;
        bottom: 50% !important;

        transform: translateY(50%) !important;

        width: 42px !important;
        height: 58px !important;

        padding: 0 !important;

        border-radius: 12px 0 0 12px !important;

        z-index: 2147483640 !important;
    }

    body > .ew-game-frame.ew-mobile-fullscreen .ew-fullscreen-button span,
    .ew-game-frame:fullscreen .ew-fullscreen-button span,
    .ew-game-frame:-webkit-full-screen .ew-fullscreen-button span {
        display: none !important;
    }
}

/* METRO V39 IOS SAFARI SAFE HEIGHT */

@media (max-width: 899px), (pointer: coarse) {

    body.ew-ios-safari-v39 .ew-game-frame.ew-mobile-fullscreen {
        top: 0 !important;
        bottom: auto !important;

        height: 100svh !important;
        max-height: 100svh !important;

        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.ew-ios-safari-v39 .ew-game-frame.ew-mobile-fullscreen .ew-game-hud {
        flex: 0 0 54px !important;
        min-height: 54px !important;
        height: 54px !important;
    }

    body.ew-ios-safari-v39 .ew-game-frame.ew-mobile-fullscreen .ew-canvas-wrap {
        flex: 1 1 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    body.ew-ios-safari-v39 .ew-game-frame.ew-mobile-fullscreen #ewMetroCanvas {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: fill !important;
    }
}

/* METRO V40 DESKTOP MISSION TEXT */

@media (min-width: 900px) {
    .ew-game-hud #ewMission {
        font-size: 19px !important;
        line-height: 1.22 !important;
        font-weight: 900 !important;
    }

    .ew-game-hud .ew-hud-mission > span {
        font-size: 11px !important;
    }
}

/* METRO HUD V41 - SCHOOL MYSTERY MATCH */

.ew-game-frame .ew-utility-actions {
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:5px!important;
}

.ew-game-frame .ew-utility-actions > .ew-audio-toggle {
    order:1!important;
}

.ew-game-frame .ew-utility-actions > .ew-mm-v41-stack {
    order:2!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    flex:0 0 66px!important;
    width:66px!important;
    min-width:66px!important;
    height:58px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
}

.ew-game-frame .ew-mm-v41-stack > button {
    position:static!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 25px!important;
    width:66px!important;
    min-width:66px!important;
    max-width:66px!important;
    height:25px!important;
    min-height:25px!important;
    max-height:25px!important;
    margin:0!important;
    padding:0 3px!important;
    border:2px solid #a45370!important;
    border-radius:12px!important;
    background:#49263d!important;
    color:#fff!important;
    box-shadow:none!important;
    transform:none!important;
    font:900 10px/1 system-ui,sans-serif!important;
    box-sizing:border-box!important;
    cursor:pointer!important;
}

.ew-game-frame .ew-mm-v41-stack > .ew-mm-v41-replay {
    font-size:20px!important;
}

.ew-game-frame .ew-mm-v41-stack > button:hover {
    background:#67324e!important;
}

.ew-game-frame .ew-utility-actions > .ew-exit-button {
    order:3!important;
    position:static!important;
    flex:0 0 53px!important;
    width:53px!important;
    min-width:53px!important;
    height:42px!important;
    padding:0 3px!important;
    margin:0!important;
    border:2px solid #a45370!important;
    border-radius:12px!important;
    background:#49263d!important;
    color:#fff!important;
    box-sizing:border-box!important;
}

.ew-game-frame .ew-utility-actions > .ew-exit-button strong {
    color:#fff!important;
    font-size:10px!important;
}

/* METRO PORTRAIT V42
   Phone portrait ONLY. Landscape and desktop unchanged. */
@media screen and (max-width:899px) and (orientation:portrait) {

  .ew-game-frame .ew-game-hud,
  body > .ew-game-frame.ew-mobile-fullscreen .ew-game-hud,
  .ew-game-frame:fullscreen .ew-game-hud,
  .ew-game-frame:-webkit-full-screen .ew-game-hud {
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:auto auto!important;
    gap:1px!important;
    flex:0 0 auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .ew-game-frame .ew-game-hud > .ew-hud-mission {
    grid-column:1/-1!important;
    grid-row:1!important;
    min-width:0!important;
    padding:8px 10px!important;
  }

  .ew-game-frame .ew-hud-mission > span {
    display:block!important;
    font-size:9px!important;
    line-height:1.2!important;
    margin-bottom:5px!important;
  }

  .ew-game-frame .ew-mission-row {
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    align-items:start!important;
  }

  .ew-game-frame .ew-mission-row > #ewMission {
    grid-column:1!important;
    grid-row:1!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    font-size:12px!important;
    line-height:1.3!important;
    white-space:normal!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
    overflow:visible!important;
  }

  .ew-game-frame .ew-mission-row > .ew-speak-button {
    grid-column:1!important;
    grid-row:2!important;
    justify-self:start!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    margin:0!important;
  }

  .ew-game-frame .ew-mission-row > .ew-utility-actions {
    grid-column:1!important;
    grid-row:2!important;
    justify-self:end!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    width:auto!important;
    max-width:calc(100% - 43px)!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    position:static!important;
    transform:none!important;
  }

  .ew-game-frame .ew-utility-actions > .ew-audio-toggle {
    flex:0 0 36px!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    margin:0!important;
  }

  .ew-game-frame .ew-utility-actions > .ew-mm-v41-stack {
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
    flex:0 0 66px!important;
    width:66px!important;
    min-width:66px!important;
    height:56px!important;
    min-height:56px!important;
    margin:0!important;
    padding:0!important;
    position:static!important;
    background:transparent!important;
    border:0!important;
    overflow:visible!important;
  }

  .ew-game-frame .ew-mm-v41-stack > button {
    position:static!important;
    flex:0 0 25px!important;
    width:66px!important;
    min-width:66px!important;
    height:25px!important;
    min-height:25px!important;
    margin:0!important;
    transform:none!important;
  }

  .ew-game-frame .ew-utility-actions > .ew-exit-button {
    position:static!important;
    flex:0 0 53px!important;
    width:53px!important;
    min-width:53px!important;
    height:42px!important;
    margin:0!important;
    transform:none!important;
  }

  .ew-game-frame .ew-game-hud > .ew-hud-compact {
    grid-row:2!important;
    grid-column:auto!important;
    min-width:0!important;
    padding:6px 3px!important;
    text-align:center!important;
  }

  .ew-game-frame .ew-game-hud > .ew-hud-compact > span {
    font-size:9px!important;
  }

  .ew-game-frame .ew-game-hud > .ew-hud-compact > strong {
    display:block!important;
    margin-top:3px!important;
    font-size:20px!important;
    line-height:1.1!important;
  }

  body > .ew-game-frame.ew-mobile-fullscreen,
  .ew-game-frame:fullscreen,
  .ew-game-frame:-webkit-full-screen {
    display:flex!important;
    flex-direction:column!important;
    height:100dvh!important;
    max-height:100dvh!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  body.ew-ios-safari-v39 > .ew-game-frame.ew-mobile-fullscreen {
    height:100svh!important;
    max-height:100svh!important;
  }

  body > .ew-game-frame.ew-mobile-fullscreen .ew-canvas-wrap,
  .ew-game-frame:fullscreen .ew-canvas-wrap,
  .ew-game-frame:-webkit-full-screen .ew-canvas-wrap {
    display:block!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
  }

  body > .ew-game-frame.ew-mobile-fullscreen #ewMetroCanvas,
  .ew-game-frame:fullscreen #ewMetroCanvas,
  .ew-game-frame:-webkit-full-screen #ewMetroCanvas {
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-height:100%!important;
    object-fit:fill!important;
  }

  body > .ew-game-frame.ew-mobile-fullscreen .ew-game-footer,
  .ew-game-frame:fullscreen .ew-game-footer,
  .ew-game-frame:-webkit-full-screen .ew-game-footer {
    display:none!important;
  }

  body > .ew-game-frame.ew-mobile-fullscreen .ew-mobile-rotate-notice,
  .ew-game-frame:fullscreen .ew-mobile-rotate-notice,
  .ew-game-frame:-webkit-full-screen .ew-mobile-rotate-notice {
    display:none!important;
  }
}

/* EW GAME STORY INTRO V45 - OUTSIDE THE GAME FRAME */
.ew-game-story-v45 {
    position:relative;
    margin:18px 0 20px;
    padding:23px 26px;
    border:1px solid #cad8e8;
    border-radius:20px;
    background:linear-gradient(125deg,#102a47,#193e62);
    color:#fff;
    box-shadow:0 12px 32px rgba(14,39,69,.12);
    box-sizing:border-box;
}
.ew-game-story-v45 .ew-story-kicker {
    display:block;
    margin-bottom:8px;
    color:#f1c978;
    font-size:11px;
    font-weight:900;
    letter-spacing:.13em;
}
.ew-game-story-v45 h3 {
    margin:0 0 12px;
    color:#fff;
    font-size:clamp(23px,3vw,34px);
    line-height:1.15;
    font-weight:900;
}
.ew-game-story-v45 p {
    max-width:850px;
    margin:0;
    color:#e4edf7;
    font-size:15px;
    line-height:1.7;
}
.ew-game-story-v45 .ew-story-goal {
    display:inline-block;
    margin-top:16px;
    padding:8px 12px;
    border:1px solid rgba(241,201,120,.35);
    border-radius:10px;
    background:rgba(241,201,120,.10);
    color:#f8dfaa;
    font-size:12px;
    font-weight:800;
}
@media screen and (max-width:600px) {
    .ew-game-story-v45 {
        padding:17px;
        border-radius:15px;
        margin:14px 0;
    }
    .ew-game-story-v45 p {
        font-size:13px;
        line-height:1.55;
    }
    .ew-game-story-v45 .ew-story-goal {
        font-size:11px;
        line-height:1.5;
    }
}
/* EW GAME COVER V46 - ONLY INTRO SECTION */
.ew-game-story-v45.ew-game-cover-v46 {
    display:block;
    overflow:hidden;
    padding:0;
    border:0;
    border-radius:20px;
    background:#102a47;
    box-shadow:0 12px 32px rgba(14,39,69,.12);
}
.ew-game-story-v45.ew-game-cover-v46 img {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover;
}
@media (max-width:600px) {
    .ew-game-story-v45.ew-game-cover-v46 {
        border-radius:14px;
    }
}

/* GAME START COVER V47 - START SCREEN ONLY */

#ewStartPanel {
  background-image:url('/games/a1-metro-mission/cover.webp')!important;
  background-color:#071426!important;
  background-size:contain!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  justify-content:flex-end!important;
  align-items:center!important;
  padding:12px 12px 25px!important;
  box-sizing:border-box!important;
}
#ewStartPanel > :not(#ewStartButton) {
  display:none!important;
}
#ewStartPanel > #ewStartButton {
  display:block!important;
  position:relative!important;
  z-index:5!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:180px!important;
  max-width:90%!important;
  min-height:48px!important;
  margin:0 auto!important;
  padding:12px 22px!important;
  border:2px solid #ffdc78!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#efaa26,#dc632c)!important;
  color:#ffffff!important;
  box-shadow:0 5px 24px rgba(0,0,0,.6)!important;
  transform:none!important;
  font-size:14px!important;
  font-weight:900!important;
  cursor:pointer!important;
}
#ewStartPanel > #ewStartButton span,
#ewStartPanel > #ewStartButton small {
  color:#ffffff!important;
}
#ewStartPanel > #ewStartButton small {
  display:none!important;
}
@media screen and (max-width:899px) and (orientation:portrait) {
  #ewStartPanel {
    padding:10px 10px 16px!important;
  }
  #ewStartPanel > #ewStartButton {
    min-width:155px!important;
    min-height:43px!important;
    font-size:12px!important;
  }
}

/* START CENTER V48 - BOTH ORIENTATIONS */

#ewStartPanel {
    justify-content:center!important;
    align-items:center!important;
}
#ewStartPanel > button {
    margin:0 auto!important;
}