/* ======================================================
   GAME CANGKIR 6
   File    : findmyscore.css
   Fungsi  : Tampilan utama permainan
   Author  : Yudhi Kartika Lindra/2026
   Version : 6.0
   ====================================================== */
/* ======================================================
   FIND MY SCORE
   ====================================================== */

.findScore{

    width:90%;

    max-width:760px;

    margin:35px auto;

    padding:20px;

    background:#ffffff;

    border-radius:12px;

    box-shadow:
        0 4px 14px rgba(0,0,0,.10);

    text-align:center;

}

/* ======================================================
   JUDUL
   ====================================================== */

.findScore h2{

    margin-bottom:18px;

    color:#1f66d8;

    font-size:28px;

}

/* ======================================================
   DESKRIPSI
   ====================================================== */

.findScore p{

    margin-bottom:18px;

    color:#666;

    font-size:16px;

}

/* ======================================================
   INPUT
   ====================================================== */

.findScore input[type="text"]{

    width:320px;

    max-width:90%;

    padding:10px 14px;

    border:1px solid #cccccc;

    border-radius:999px;

    font-size:16px;

    outline:none;

    transition:.25s;

}

.findScore input[type="text"]:focus{

    border-color:#1f66d8;

    box-shadow:

        0 0 0 4px

        rgba(31,102,216,.18);

}

/* ======================================================
   GRUP TOMBOL
   ====================================================== */

.grupTombol{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:18px;

}

/* ======================================================
   TOMBOL
   ====================================================== */
.findScore .btnFind,
.findScore .btnReset{

    width:140px;

    text-align:center;

    display:inline-block;

    margin:10px 4px;

    padding:10px 18px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    font-size:16px;

    font-weight:bold;

    color:#ffffff;

    text-decoration:none;

    transition:
        background .25s ease,
        transform .15s ease,
        box-shadow .25s ease;
}

/* ======================================================
   FIND
   ====================================================== */

.findScore .btnFind{

    background:#1f66d8;

    box-shadow:

        0 4px 10px

        rgba(31,102,216,.30);

}

.findScore .btnFind:hover{

    background:#1553b5;

    box-shadow:

        0 6px 14px

        rgba(31,102,216,.40);

}

.findScore .btnFind:active{

    transform:scale(.96);

}

/* ======================================================
   RESET
   ====================================================== */

.findScore .btnReset{

    background:#777777;

    box-shadow:

        0 4px 10px

        rgba(0,0,0,.20);

}

.findScore .btnReset:hover{

    background:#555555;

}

.findScore .btnReset:active{

    transform:scale(.96);

}

/* ======================================================
   HASIL
   ====================================================== */

.hasilCari{

    margin-top:25px;

}

/* ======================================================
   TABEL
   ====================================================== */

.hasilCari table{

    width:100%;

    border-collapse:collapse;

    margin-top:15px;

}

.hasilCari th{

    background:#1f66d8;

    color:#ffffff;

    padding:10px;

}

.hasilCari td{

    padding:10px;

    border-bottom:1px solid #dddddd;

}

/* ======================================================
   PESAN
   ====================================================== */

.pesanCari{

    margin-top:20px;

    padding:15px;

    border-radius:8px;

    background:#f5f5f5;

    color:#555555;

    font-size:16px;

}

/* ======================================================
   RESPONSIVE
   ====================================================== */

@media(max-width:768px){

.findScore{

    width:96%;

    padding:16px;

}

.findScore h2{

    font-size:22px;

}

.findScore input[type="text"]{

    width:100%;

}

.btnFind,

.btnReset{

    width:100%;

}

.hasilCari{

    overflow-x:auto;

}

.hasilCari table{

    min-width:520px;

}

}

/* ======================================================
   HIGHLIGHT HASIL PENCARIAN
   ====================================================== */

.hasilPlayer{

    background:#e8fff0;

    transition:.25s;

}

.hasilPlayer:hover{

    background:#d2ffe2;

}

.hasilPlayer td{

    font-weight:bold;

}