:root{
    --m10-orange:#ff9a32;
    --m10-gold:#ffc14d;
    --m10-white:#fff;
}

.m10-wrap,
.m10-wrap *{box-sizing:border-box}

.m10-wrap{
    width:100%;
    margin:0 auto;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:#fff;
}

.m10-game{
    position:relative;
    width:min(1280px,100%);
    aspect-ratio:1559/1009;
    margin:auto;
    overflow:hidden;
    border-radius:28px;
    background:#05080d;
    box-shadow:0 34px 95px rgba(0,0,0,.48);
    isolation:isolate;
}

.m10-game:fullscreen{
    width:100vw;
    height:100vh;
    max-width:none;
    border-radius:0;
    aspect-ratio:auto;
    background:#030507;
}

.m10-photo{
    position:absolute;
    inset:0;
    z-index:-5;
    background-image:var(--m10-arena);
    background-size:100% 100%;
    background-position:center;
    background-repeat:no-repeat;
}

.m10-vignette{
    position:absolute;
    inset:0;
    z-index:-3;
    pointer-events:none;
    background:
        linear-gradient(180deg,rgba(0,0,0,.12),transparent 18%,transparent 65%,rgba(0,0,0,.18)),
        linear-gradient(90deg,rgba(0,0,0,.15),transparent 16% 84%,rgba(0,0,0,.15));
}

.m10-scoreboard{
    position:absolute;
    z-index:40;
    left:50%;
    top:1.8%;
    transform:translateX(-50%);
    width:33.4%;
    min-width:270px;
    display:grid;
    grid-template-columns:1fr 1.12fr 1fr;
    gap:1.2%;
    padding:.8%;
    border:3px solid #445061;
    border-radius:10px;
    background:linear-gradient(160deg,#263240,#111821 35%,#070b10 80%,#222c38);
    box-shadow:
        0 15px 30px rgba(0,0,0,.44),
        inset 0 0 0 2px #06090d,
        inset 0 1px 0 rgba(255,255,255,.14);
}

.m10-board-cell{
    min-height:78px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    background:
        radial-gradient(circle at 50% 45%,rgba(64,37,15,.15),transparent 68%),
        #030405;
    box-shadow:inset 0 0 18px rgba(0,0,0,.92);
}

.m10-board-cell span{
    color:rgba(255,255,255,.64);
    font-size:clamp(7px,.72vw,11px);
    font-weight:900;
    letter-spacing:.19em;
}

.m10-board-cell strong{
    color:#ff9a31;
    font-family:"Courier New",monospace;
    font-size:clamp(28px,3.7vw,55px);
    line-height:.98;
    letter-spacing:.02em;
    text-shadow:0 0 7px #ff7300,0 0 18px rgba(255,111,0,.5);
    font-variant-numeric:tabular-nums;
}

.m10-board-cell strong em{
    margin-left:3px;
    font-size:.34em;
    font-style:normal;
    color:#fff;
    text-shadow:none;
}

.m10-board-main strong{
    color:#ffb43e;
}

.m10-controls{
    position:absolute;
    z-index:55;
    right:2.1%;
    top:2.3%;
    display:flex;
    gap:8px;
}

.m10-icon{
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    color:#fff;
    background:rgba(5,11,19,.88);
    box-shadow:0 8px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);
    cursor:pointer;
    font-size:18px;
}

.m10-live-zone{
    position:absolute;
    z-index:20;
    left:0;
    right:0;
    bottom:0;
    height:39%;
    padding-top:2.1%;
    background:
        linear-gradient(180deg,rgba(6,10,16,.12),rgba(6,10,16,.26) 22%,rgba(3,6,10,.62) 100%);
    backdrop-filter:blur(14px) saturate(.82);
    -webkit-backdrop-filter:blur(14px) saturate(.82);
}

.m10-live-zone::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at 50% 27%,rgba(0,0,0,.44),transparent 43%),
        linear-gradient(180deg,rgba(3,6,10,.12),rgba(3,6,10,.27));
    pointer-events:none;
}

.m10-problem{
    position:relative;
    z-index:5;
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:clamp(9px,1.35vw,20px);
    font-size:clamp(43px,5.2vw,76px);
    font-weight:950;
    letter-spacing:-.055em;
    text-shadow:0 6px 18px rgba(0,0,0,.72);
}

.m10-op{color:rgba(255,255,255,.66);font-weight:650}
.m10-q{color:var(--m10-gold)}

.m10-options{
    position:relative;
    z-index:8;
    width:56%;
    margin:2.4% auto 0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7%;
}

.m10-choice{
    position:relative;
    width:100%;
    aspect-ratio:1;
    border:0;
    background:none;
    cursor:pointer;
    padding:0;
    transition:transform .18s ease,filter .18s ease,opacity .18s ease;
    filter:drop-shadow(0 15px 11px rgba(0,0,0,.42));
}

.m10-choice:hover:not(:disabled){
    transform:translateY(-7px) scale(1.045);
    filter:drop-shadow(0 21px 13px rgba(0,0,0,.5));
}

.m10-choice img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    user-select:none;
    pointer-events:none;
}

.m10-choice-number{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    z-index:3;
    font-size:clamp(35px,4.2vw,62px);
    font-weight:950;
    color:#fff;
    text-shadow:0 4px 7px rgba(0,0,0,.85);
}

.m10-feedback{
    position:absolute;
    z-index:12;
    left:50%;
    top:4%;
    transform:translateX(-50%);
    min-height:42px;
    font-size:clamp(20px,2.4vw,34px);
    font-weight:950;
    color:#fff;
    text-shadow:0 5px 16px rgba(0,0,0,.75);
}

.m10-flight{
    position:absolute;
    z-index:27;
    pointer-events:none;
    will-change:left,top,transform,opacity;
}

.m10-flight img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.m10-flight span{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:950;
    text-shadow:0 4px 7px rgba(0,0,0,.85);
}

.m10-rim-flash{
    position:absolute;
    z-index:28;
    left:49.25%;
    top:24.1%;
    width:6.1%;
    aspect-ratio:2.8/1;
    border-radius:50%;
    pointer-events:none;
    opacity:0;
    box-shadow:0 0 0 0 rgba(255,139,33,0);
}

.m10-rim-flash.active{
    animation:m10-rimPulse .38s ease;
}
@keyframes m10-rimPulse{
    0%{opacity:0}
    35%{opacity:1;box-shadow:0 0 24px 6px rgba(255,139,33,.48)}
    100%{opacity:0}
}

.m10-start,
.m10-results{
    position:absolute;
    z-index:100;
    inset:0;
    display:grid;
    place-items:center;
    background:
        radial-gradient(circle at 50% 38%,rgba(255,145,34,.09),transparent 30%),
        rgba(3,6,11,.72);
    backdrop-filter:blur(8px);
}

.m10-results[hidden]{display:none!important}

.m10-start-card,
.m10-results-card{
    width:min(480px,88%);
    padding:36px 32px;
    text-align:center;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.1);
    background:linear-gradient(180deg,rgba(18,25,36,.95),rgba(5,9,15,.98));
    box-shadow:0 28px 80px rgba(0,0,0,.48);
}

.m10-small{
    color:#ffc15a;
    font-size:11px;
    font-weight:900;
    letter-spacing:.24em;
}

.m10-start-card h1{
    margin:7px 0 0;
    font-size:clamp(52px,7vw,82px);
    line-height:.95;
    letter-spacing:-.07em;
}

.m10-start-card p{
    margin:12px 0 22px;
    color:rgba(255,255,255,.66);
    font-size:18px;
    font-weight:700;
}

.m10-start-card button,
.m10-results-card button{
    width:100%;
    min-height:57px;
    border:0;
    border-radius:15px;
    cursor:pointer;
    color:#180b02;
    background:linear-gradient(180deg,#ffbc69,#f27616);
    font-weight:950;
    letter-spacing:.08em;
    box-shadow:0 14px 30px rgba(249,115,22,.27),inset 0 1px 0 rgba(255,255,255,.4);
}

.m10-final{
    margin:12px 0 2px;
    font-size:clamp(70px,9vw,105px);
    line-height:.9;
    font-weight:950;
}

.m10-final small{
    color:rgba(255,255,255,.35);
    font-size:.34em;
}

.m10-results-card h2{
    margin:15px 0 22px;
    color:#ffc15a;
    font-size:clamp(21px,2.7vw,30px);
}

.m10-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px;
}

.m10-stats div{
    padding:13px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.045);
}

.m10-stats span{
    display:block;
    color:rgba(255,255,255,.45);
    text-transform:uppercase;
    font-size:10px;
    font-weight:800;
    letter-spacing:.09em;
}

.m10-stats strong{font-size:23px}

@media(max-width:760px){
    .m10-scoreboard{width:42%;min-width:235px}
    .m10-board-cell{min-height:58px}
    .m10-controls{top:1.7%;right:1.5%}
    .m10-icon{width:38px;height:38px}
    .m10-live-zone{height:42%}
    .m10-options{width:65%}
}

@media(max-width:520px){
    .m10-game{border-radius:18px}
    .m10-scoreboard{top:1%;width:52%;min-width:205px;padding:.6%}
    .m10-board-cell{min-height:48px}
    .m10-controls{gap:5px}
    .m10-icon{width:32px;height:32px;font-size:14px}
    .m10-live-zone{height:45%;padding-top:3%}
    .m10-options{width:70%;gap:4%}
}


/* v1.4: photographic foreground slice sits above the flying ball,
   making a made shot genuinely disappear through/behind the rim and net. */
.m10-rim-foreground{
    position:absolute;
    z-index:30;
    left:45.67%;
    top:21.80%;
    width:8.72%;
    height:10.90%;
    pointer-events:none;
    background-image:var(--m10-rim);
    background-size:100% 100%;
    background-repeat:no-repeat;
}

.m10-flight{
    transform-origin:50% 50%;
}