/**
 * /public/games/checker/assets/css/style.css
 * Last edited: 2026-03-24 17:05:00 -0400
 */

:root{
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);

    --bg:#f3f4f6;
    --card:#ffffff;
    --text:#111827;
    --muted:#6b7280;
    --accent:#2563eb;
    --accent-soft:#dbeafe;
    --border:#e5e7eb;
    --shadow:0 18px 40px rgba(15,23,42,0.16);

    --board-light:#c7cbd1;
    --board-dark:#767d8c;
    --board-border:#9aa4b2;

    --red:#e55347;
    --white:#f8fafc;
    --black:#111827;
    --green:#22c55e;
    --capture:#ef4444;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body{
    min-height:100%;
}

body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    padding-top:calc(12px + var(--safe-area-top));
    padding-bottom:calc(24px + var(--safe-area-bottom));
    -webkit-text-size-adjust:100%;
}

.page{
    max-width:560px;
    margin:0 auto;
    padding:20px 16px 40px;
}

.top-bar{
    display:flex;
    align-items:center;
    margin-bottom:18px;
}

.btn-back{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:999px;
    background:var(--accent-soft);
    color:var(--accent);
    text-decoration:none;
    font-size:14px;
}

.title-block{
    margin-top:10px;
}

.title{
    font-size:26px;
    font-weight:700;
    margin-bottom:6px;
}

.subtitle{
    font-size:15px;
    color:var(--muted);
}

.card{
    margin-top:20px;
    background:var(--card);
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:16px;
}

.game-shell{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.game-top{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.player-strip{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.player-chip{
    min-height:44px;
    border-radius:12px;
    border:1px solid var(--border);
    padding:10px 12px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:600;
    background:#fff;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    flex:0 0 auto;
}

.red-dot{
    background:var(--red);
}

.white-dot{
    background:var(--white);
    border:2px solid var(--black);
}

.game-info{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.turn-indicator{
    min-height:44px;
    border-radius:12px;
    background:#eef4ff;
    color:#1d4ed8;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    padding:10px 12px;
    text-align:center;
}

.game-controls{
    display:flex;
    gap:8px;
}

.btn-control{
    flex:1;
    border:none;
    border-radius:12px;
    background:var(--accent);
    color:#fff;
    min-height:44px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.btn-control-secondary{
    background:#fff;
    color:var(--accent);
    border:1px solid #bfd7ff;
}

.board-wrap{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.board{
    width:min(92vw, 500px);
    height:min(92vw, 500px);
    max-width:500px;
    max-height:500px;
    display:grid;
    grid-template-columns:repeat(8, 1fr);
    grid-template-rows:repeat(8, 1fr);
    border:4px solid var(--board-border);
    border-radius:14px;
    overflow:hidden;
    background:var(--board-dark);
    box-shadow:0 8px 16px rgba(15,23,42,0.16);
    touch-action:manipulation;
    contain:layout paint size;
}

.square{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:0;
    overflow:hidden;
}

.square.light{
    background:var(--board-light);
}

.square.dark{
    background:var(--board-dark);
}

.square.selected::after{
    content:"";
    position:absolute;
    inset:3px;
    border:3px solid var(--accent);
    border-radius:8px;
    pointer-events:none;
    z-index:2;
}

.square.move::before{
    content:"";
    position:absolute;
    width:18%;
    height:18%;
    min-width:10px;
    min-height:10px;
    background:rgba(34,197,94,0.82);
    border-radius:50%;
    z-index:1;
    pointer-events:none;
}

.square.capture-move::before{
    content:"";
    position:absolute;
    width:38%;
    height:38%;
    min-width:18px;
    min-height:18px;
    border:4px solid rgba(239,68,68,0.85);
    border-radius:50%;
    z-index:1;
    pointer-events:none;
}

.piece{
    width:68%;
    height:68%;
    min-width:0;
    min-height:0;
    border-radius:50%;
    position:relative;
    z-index:3;
    transform:translateZ(0);
    will-change:transform;
    flex:0 0 auto;
}

.piece.red{
    background:var(--red);
    box-shadow:inset 0 -3px 0 rgba(0,0,0,0.12);
}

.piece.white{
    background:var(--white);
    border:2px solid var(--black);
}

.piece.king{
    box-shadow:0 0 0 3px rgba(37,99,235,0.30) inset;
}

.king-mark{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(14px, 2.4vw, 18px);
    font-weight:800;
    color:#2563eb;
    pointer-events:none;
}

.notation{
    position:absolute;
    color:rgba(255,255,255,0.72);
    font-size:clamp(9px, 1.7vw, 12px);
    line-height:1;
    pointer-events:none;
    z-index:0;
}

.notation.rank{
    top:4px;
    left:4px;
}

.notation.file{
    right:4px;
    bottom:4px;
}

.status-bar{
    min-height:46px;
    border-radius:12px;
    background:#f8fafc;
    border:1px solid var(--border);
    color:#374151;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:10px 12px;
    font-size:14px;
    line-height:1.4;
}

.history-card{
    border-radius:14px;
    border:1px solid var(--border);
    padding:12px;
    background:#fbfdff;
}

.history-card h3{
    font-size:17px;
    margin-bottom:8px;
}

.move-log{
    list-style:none;
    max-height:180px;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.move-log li{
    border-radius:10px;
    background:#fff;
    border:1px solid var(--border);
    padding:8px 10px;
    font-size:13px;
    color:#374151;
}

.modal{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.44);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:100;
    padding:16px;
}

.modal.is-open{
    display:flex;
}

.modal-card{
    width:min(100%, 420px);
    background:#fff;
    border-radius:18px;
    box-shadow:0 24px 60px rgba(15,23,42,0.22);
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.modal-card h2{
    font-size:24px;
    text-align:center;
    margin-bottom:4px;
}

.modal-card label{
    font-size:14px;
    font-weight:600;
    color:#374151;
    margin-top:2px;
}

.modal-card input,
.modal-card select{
    width:100%;
    min-height:46px;
    border-radius:12px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--text);
    padding:10px 12px;
    font-size:16px;
    -webkit-appearance:none;
    appearance:none;
}

.btn-start{
    width:100%;
    min-height:48px;
    border:none;
    border-radius:12px;
    background:var(--accent);
    color:#fff;
    font-size:16px;
    font-weight:700;
    margin-top:6px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

@media (max-width:600px){
    .page{
        padding-top:16px;
    }

    .board{
        width:min(94vw, 500px);
        height:min(94vw, 500px);
    }

    .player-strip{
        grid-template-columns:1fr;
    }

    .game-controls{
        flex-wrap:wrap;
    }

    .btn-control{
        min-width:120px;
    }
}