/* ============================================================
   Windows 98 Solitaire theme
   ============================================================ */

:root{
    --face:        #c0c0c0;
    --light:       #ffffff;
    --highlight:   #dfdfdf;
    --shadow:      #808080;
    --dark-shadow: #000000;
    --title-start: #000080;
    --title-end:   #1084d0;
    --felt:        #008000;
    --felt-dark:   #006b1a;
    --text:        #000000;
}

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

body{
    background:transparent;
    font-family:Tahoma,"MS Sans Serif",Geneva,Arial,sans-serif;
    font-size:13px;
    color:var(--text);
    height:100vh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:0;
    overflow:hidden;
}

/* -------------------- window chrome -------------------- */

.game{
    width:fit-content;
    background:var(--face);
    border:none;
    box-shadow:none;
    padding:0;
}

/* .title-bar{
    background:linear-gradient(90deg,var(--title-start),var(--title-end));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:3px 4px 3px 6px;
    font-weight:bold;
    font-size:13px;
    letter-spacing:.2px;
    user-select:none;
} */

/* .title-bar-text{
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
} */

/* .title-bar-controls{
    display:flex;
    gap:2px;
} */

/* .title-bar-controls button{
    width:16px;
    height:14px;
    background:var(--face);
    border-top:1px solid var(--light);
    border-left:1px solid var(--light);
    border-right:1px solid var(--dark-shadow);
    border-bottom:1px solid var(--dark-shadow);
    box-shadow:inset 1px 1px 0 var(--highlight);
    font-size:9px;
    line-height:1;
    padding:0;
    cursor:pointer;
    color:#000;
    display:flex;
    align-items:center;
    justify-content:center;
} */

/* .title-bar-controls button:active{
    border-top:1px solid var(--dark-shadow);
    border-left:1px solid var(--dark-shadow);
    border-right:1px solid var(--light);
    border-bottom:1px solid var(--light);
    box-shadow:none;
} */

.menu-bar{
    display:none;
}

.menu-bar span{
    cursor:default;
    padding:2px 5px;
}

.menu-bar span:hover{
    background:var(--title-start);
    color:#fff;
}

/* -------------------- toolbar -------------------- */

header.toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:6px 8px;
    background:var(--face);
}

button{
    font-family:inherit;
    font-size:13px;
    background:var(--face);
    border-top:2px solid var(--light);
    border-left:2px solid var(--light);
    border-right:2px solid var(--dark-shadow);
    border-bottom:2px solid var(--dark-shadow);
    box-shadow:
        inset 1px 1px 0 var(--highlight),
        inset -1px -1px 0 var(--shadow);
    padding:5px 16px;
    cursor:pointer;
    color:#000;
}

button:active{
    border-top:2px solid var(--dark-shadow);
    border-left:2px solid var(--dark-shadow);
    border-right:2px solid var(--light);
    border-bottom:2px solid var(--light);
    box-shadow:none;
    padding:6px 15px 4px 17px;
}

#timer{
    background:#000;
    color:#00ff2f;
    font-family:"Courier New",Courier,monospace;
    font-weight:bold;
    font-size:18px;
    letter-spacing:2px;
    padding:4px 10px;
    min-width:70px;
    text-align:center;
    border-top:2px solid var(--dark-shadow);
    border-left:2px solid var(--dark-shadow);
    border-right:2px solid var(--light);
    border-bottom:2px solid var(--light);
}

/* -------------------- playing field -------------------- */

.felt{
    background:
        repeating-linear-gradient(
            45deg,
            var(--felt) 0 2px,
            var(--felt-dark) 2px 4px
        );
    padding:6px;
    border-top:2px solid var(--dark-shadow);
    border-left:2px solid var(--dark-shadow);
    border-right:2px solid var(--light);
    border-bottom:2px solid var(--light);
}

.top{
    display:flex;
    justify-content:space-between;
    margin-bottom:8px;
}

.left,
.right{
    display:flex;
    gap:6px;
}

.pile,
.foundation{
    width:48px;
    height:58px;
    border-radius:2px;
    border-top:2px solid var(--dark-shadow);
    border-left:2px solid var(--dark-shadow);
    border-right:2px solid var(--light);
    border-bottom:2px solid var(--light);
    background:rgba(0,0,0,.18);
    position:relative;
}

.tableau{
    display:flex;
    gap:6px;
}

.column{
    width:54px;
    min-height:220px;
    position:relative;
}

/* -------------------- cards -------------------- */

.card{
    width:44px;
    height:56px;
    border-radius:3px;
    background:#f5f5f0;
    color:black;
    position:absolute;
    left:0;
    border-top:1px solid #fff;
    border-left:1px solid #fff;
    border-right:1px solid var(--shadow);
    border-bottom:1px solid var(--shadow);
    box-shadow:2px 2px 4px rgba(0,0,0,.5);
    cursor:pointer;
    user-select:none;
    transition:.1s;
    font-family:"Times New Roman",Georgia,serif;
}

.card:hover{
    transform:translateY(-3px);
}

.red{
    color:#c40000;
}

.black{
    color:#111;
}

.card-back{
    background-color:#1a3f8f;
    background-image:
        repeating-linear-gradient(45deg,#16327a 0 4px,transparent 4px 8px),
        repeating-linear-gradient(-45deg,#3a63c8 0 4px,transparent 4px 8px);
    border:3px solid #fff;
}

.rank{
    position:absolute;
    top:2px;
    left:4px;
    font-weight:bold;
    font-size:13px;
    line-height:1;
}

.suit{
    position:absolute;
    bottom:2px;
    right:4px;
    font-size:18px;
    line-height:1;
}

.column .card{
    margin-top:0;
}

.card.selected{
    box-shadow:
        0 0 0 3px #ffd700,
        2px 2px 4px rgba(0,0,0,.5);
    transform:translateY(-4px);
}

.card-static{
    position:static;
    width:100%;
    height:100%;
    box-shadow:none;
}

.foundation-hint,
.empty-hint{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    color:rgba(255,255,255,.3);
    pointer-events:none;
}

/* -------------------- status bar -------------------- */

.status-bar{
    display:flex;
    justify-content:space-between;
    background:var(--face);
    padding:3px 8px;
    font-size:12px;
    border-top:1px solid var(--shadow);
    box-shadow:0 1px 0 var(--highlight) inset;
}

.status-bar-field{
    border-top:1px solid var(--shadow);
    border-left:1px solid var(--shadow);
    border-right:1px solid var(--light);
    border-bottom:1px solid var(--light);
    padding:1px 8px;
}

h1{
    font-size:16px;
}