body{
    margin:0;
    background:#0b3d1d;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
}

.container{
    max-width:500px;
    margin:0 auto;
    padding:20px;
    text-align:center;
}

#headerImage{
    display:block;
    width:100%;
    max-width:420px;
    margin:20px auto;
    border-radius:18px;
}

/* ---------- NAVIGATION ---------- */

#tabs{
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin:20px 0 30px;
}

.tab{
    flex:1;
    padding:12px 8px;
    background:#222b3c;
    color:#fff;
    border:none;
    border-radius:12px;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
    transition:.2s;
}

.tab.active{
    background:#FFD54A;
    color:#111;
}

.tab:hover{
    transform:translateY(-2px);
}

/* ---------- BUTTON ---------- */

button{
    background:#FFD54A;
    color:#111;
    border:none;
    border-radius:14px;
    padding:18px 36px;
    font-size:22px;
    font-weight:bold;
    cursor:pointer;
}

button:disabled{
    opacity:.6;
}

/* ---------- HOME CARD ---------- */

#playArea{
    margin-top:30px;
    background:#1d2433;
    border:2px solid #FFD54A;
    border-radius:20px;
    padding:40px 25px;
    min-height:260px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-shadow:0 10px 35px rgba(0,0,0,.35);
}

.formation{
    font-size:20px;
    font-weight:800;
    letter-spacing:6px;
    color:#FFD54A;
}

.playNumber{
    font-size:88px;
    font-weight:900;
    margin:10px 0 25px;
}

.playName{
    font-size:34px;
    color:#FFD54A;
    font-weight:700;
    line-height:1.3;
}

/* ---------- COUNTDOWN ---------- */

@keyframes pulse{

    0%{transform:scale(1);}
    50%{transform:scale(1.12);}
    100%{transform:scale(1);}

}

#countdown{

    font-size:110px;
    font-weight:900;
    color:#FFD54A;
    animation:pulse 1s infinite;

}

/* ---------- TEST PAGE ---------- */

.pageHeader{

    display:flex;
    justify-content:space-between;
    margin-bottom:20px;

}

#testCard{

    background:#1d2433;
    border:2px solid #FFD54A;
    border-radius:20px;
    padding:20px;
    box-shadow:0 10px 35px rgba(0,0,0,.35);

}

#playTitle{

    text-align:center;
    font-size:36px;
    font-weight:900;
    color:#FFD54A;
    margin-bottom:20px;

}

/* ---------- IMAGE + CANVAS ---------- */

#canvasContainer{

    position:relative;

    width:100%;

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    border:2px solid rgba(255,255,255,.15);

}

#playImage{

    display:block;

    width:100%;

    height:auto;

    user-select:none;

    -webkit-user-drag:none;

    pointer-events:none;

}

#drawCanvas{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    touch-action:none;

    cursor:crosshair;

}

/* ---------- TOOLBAR ---------- */

#toolBar{

    display:flex;

    gap:10px;

    margin-top:20px;

}

.toolBtn{

    flex:1;

    font-size:16px;

    padding:12px;

}

#statusText{

    text-align:center;

    margin-top:18px;

    color:#9ecfff;

    font-weight:bold;

}