/* =========================================================
   SPRINT G — MUNDOS Y CORRE Y APRENDE
========================================================= */

.world-select-panel,
.character-select-panel{
    padding:clamp(14px,3vw,24px);
}

.world-choice-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.world-choice-card{
    overflow:hidden;
    border:4px solid var(--world-accent, rgba(255,255,255,.9));
    border-radius:26px;
    padding:0;
    background:color-mix(in srgb, var(--world-accent, #fff) 18%, white);
    box-shadow:0 8px 0 rgba(0,0,0,.12);
    text-align:left;
}

.world-choice-card:active{
    transform:translateY(5px);
    box-shadow:0 3px 0 rgba(0,0,0,.12);
}

.world-choice-card img{
    display:block;
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
}

.world-choice-card span{
    display:grid;
    gap:4px;
    padding:14px;
}

.world-choice-card strong{
    font-size:21px;
}

.world-choice-card small{
    opacity:.68;
}

.character-choice-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.character-choice-card{
    min-width:0;
    border:4px solid white;
    border-radius:24px;
    padding:10px;
    background:linear-gradient(#fff,#eef7ff);
    box-shadow:0 7px 0 rgba(0,0,0,.10);
}

.character-choice-card img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:contain;
}

.character-choice-card strong{
    display:block;
    margin-top:7px;
    font-size:17px;
}

.character-loading,
.world-loading,
.world-error{
    display:grid;
    place-items:center;
    min-height:220px;
    font-weight:900;
    text-align:center;
}

/* WORLD GAME */

.screen-world-game{
    overflow:hidden!important;
}

.world-game-shell{
    height:100%;
    min-height:0;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:8px;
}

.world-topbar,
.runner-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.world-title{
    min-width:0;
    padding:8px 14px;
    border:3px solid rgba(255,255,255,.8);
    border-radius:18px;
    background:rgba(255,255,255,.82);
    text-align:center;
}

.world-title strong,
.world-title span{
    display:block;
}

.world-title span{
    margin-top:2px;
    font-size:12px;
    opacity:.72;
}

.world-stage{
    position:relative;
    min-width:0;
    min-height:0;
    overflow:hidden;
    border:5px solid rgba(255,255,255,.9);
    border-radius:28px;
    background-size:cover;
    background-position:center;
    box-shadow:0 10px 22px rgba(0,0,0,.18);
    touch-action:none;
}

.world-player{
    position:absolute;
    z-index:20;
    left:0;
    top:0;
    width:clamp(68px,15vw,118px);
    height:clamp(68px,15vw,118px);
    transition:filter .15s;
    will-change:transform;
    pointer-events:none;
}

.world-player img,
.world-object img{
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 7px 5px rgba(0,0,0,.28));
}

.world-object{
    position:absolute;
    z-index:10;
    width:clamp(62px,13vw,105px);
    height:clamp(62px,13vw,105px);
    padding:0;
    border:0;
    background:transparent;
    transform:translate(-50%,-50%);
}

.world-object.is-discovered{
    animation:worldDiscover .55s ease;
}

@keyframes worldDiscover{
    50%{transform:translate(-50%,-50%) scale(1.28) rotate(6deg)}
}

.world-controls{
    display:grid;
    justify-content:center;
    gap:4px;
}

.world-controls>button,
.world-controls div button,
.runner-controls button{
    width:58px;
    height:48px;
    border:3px solid white;
    border-radius:16px;
    background:linear-gradient(#93e9ff,#36b9ff);
    font-size:24px;
    box-shadow:0 5px 0 rgba(0,66,120,.22);
}

.world-controls>button{
    margin:auto;
}

.world-controls div{
    display:flex;
    gap:5px;
}

/* RUNNER */

.screen-runner-game{
    overflow:hidden!important;
}

.runner-shell{
    height:100%;
    min-height:0;
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr) auto;
    gap:8px;
}

.runner-stats{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.runner-stats span{
    padding:7px 10px;
    border:3px solid white;
    border-radius:999px;
    background:rgba(255,255,255,.86);
    font-size:13px;
}

.runner-question{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border:4px solid white;
    border-radius:20px;
    padding:8px 14px;
    background:#fff5bc;
    font-size:clamp(17px,4vw,24px);
    font-weight:900;
    text-align:center;
}

.runner-road{
    position:relative;
    min-height:0;
    overflow:hidden;
    border:6px solid white;
    border-radius:28px;
    background:
        linear-gradient(90deg,
            #7ed957 0 4%,
            #47484d 4% 96%,
            #7ed957 96%),
        #47484d;
    box-shadow:0 10px 20px rgba(0,0,0,.18);
}

.runner-lane{
    position:absolute;
    top:0;
    bottom:0;
    width:33.333%;
    border-right:3px dashed rgba(255,255,255,.55);
}

.runner-lane[data-lane="0"]{left:0}
.runner-lane[data-lane="1"]{left:33.333%}
.runner-lane[data-lane="2"]{
    left:66.666%;
    border-right:0;
}

.runner-player{
    position:absolute;
    z-index:20;
    bottom:5%;
    width:clamp(68px,16vw,112px);
    height:clamp(68px,16vw,112px);
    transform:translateX(-50%);
    transition:left .18s ease;
}

.runner-player img,
.runner-answer img{
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 7px 5px rgba(0,0,0,.3));
}

.runner-answer{
    position:absolute;
    z-index:10;
    top:-18%;
    width:clamp(72px,17vw,120px);
    height:clamp(72px,17vw,120px);
    transform:translateX(-50%);
    animation:runnerApproach var(--runner-time,3.2s) linear forwards;
}

@keyframes runnerApproach{
    from{top:-18%;transform:translateX(-50%) scale(.55)}
    to{top:72%;transform:translateX(-50%) scale(1)}
}

.runner-answer.is-correct{
    filter:drop-shadow(0 0 16px #72ff91);
}

.runner-answer.is-wrong{
    animation:runnerWrong .3s linear 2;
}

@keyframes runnerWrong{
    50%{transform:translateX(-50%) rotate(10deg)}
}

.runner-controls{
    display:flex;
    justify-content:center;
    gap:18px;
}

.runner-controls button{
    width:100px;
    height:54px;
}

.runner-restart{
    border:0;
    border-radius:999px;
    padding:8px 14px;
    background:#58cc6b;
    color:#073d18;
    font-weight:900;
}

@media(max-width:650px){
    .world-choice-grid{
        grid-template-columns:1fr;
    }

    .character-choice-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .world-controls>button,
    .world-controls div button{
        width:52px;
        height:42px;
    }
}

@media(orientation:landscape) and (max-height:600px){
    .world-controls{
        position:absolute;
        right:12px;
        bottom:12px;
        z-index:40;
    }

    .world-game-shell{
        position:relative;
        grid-template-rows:auto minmax(0,1fr);
    }

    .runner-shell{
        grid-template-rows:auto auto minmax(0,1fr);
    }

    .runner-controls{
        position:absolute;
        right:14px;
        bottom:14px;
        z-index:40;
    }
}


.runner-lane{
    cursor:pointer;
    z-index:5;
    touch-action:manipulation;
}

.runner-answer{
    pointer-events:none;
}