* { box-sizing: border-box; }

body { font-family: monospace; margin: 2rem; background: #1a1a2e; color: #eee; }
h1 { color: #e0c88a; }
button { cursor: pointer; padding: .4rem .8rem; margin: .2rem; border: none; border-radius: 4px; }

/* ---- Scores / info bars ---- */

.scores      { font-size: 1.1rem; margin-bottom: .6rem; }
.score-label { color: #aaa; }
.match-scores { color: #aaa; font-size: .9rem; margin-top: .25rem; }
.trump-info  { color: #e0c88a; font-size: .9rem; margin-bottom: .4rem; }
.last-trick  { color: #888; font-size: .85rem; margin-bottom: .4rem; }
.multiplier-badge { margin-left: .4rem; background: #c06000; color: #fff;
                    font-size: .8rem; border-radius: 3px; padding: 0 .3rem; }

/* ---- Trick area — cross layout ---- */
/* Player positions: 2=top(partner), 1=left, 3=right, 0=bottom(human) */

.trick-area {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: .5rem;
    background: #0d1f35;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: .75rem;
    margin: .75rem 0;
    min-height: 200px;
}

.trick-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .4rem;
    border-radius: 6px;
    transition: background .2s;
    min-height: 115px;   /* prevents row-height changes as cards appear/disappear */
}

.trick-slot.trick-top    { grid-column: 2; grid-row: 1; }
.trick-slot.trick-left   { grid-column: 1; grid-row: 2; }
.trick-slot.trick-right  { grid-column: 3; grid-row: 2; }
.trick-slot.trick-bottom { grid-column: 2; grid-row: 3; }

.trick-slot.active-player { background: #1a3a5c; }
.trick-slot.just-played   { background: #1a3a20; }

.trick-name       { font-size: .75rem; color: #aaa; }
.trick-cards-left { font-size: .7rem;  color: #555; }
.trick-placeholder { font-size: 1.8rem; color: #2a3a4a; line-height: 1; }

/* Card shown on the table */
@keyframes card-appear {
    from { opacity: 0; transform: translateY(-10px) scale(0.88); }
    to   { opacity: 1; transform: translateY(0)     scale(1); }
}

.trick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f5f0e8;
    color: #111;
    border-radius: 6px;
    padding: .35rem .55rem;
    min-width: 54px;
    box-shadow: 0 3px 8px rgba(0,0,0,.6);
    /* 'both' fill: card stays invisible during its delay, then animates in */
    animation: card-appear 0.5s ease-out both;
}
.trick-card.red { color: #c00; }

.card-glyph    { font-size: 2.2rem; line-height: 1.05; }
.card-label-sm { font-size: .7rem; font-weight: bold; margin-top: 1px; }

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

.human-label { margin-top: .75rem; font-weight: bold; }
.hand        { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem;
               min-height: 120px; align-content: flex-start; }

.hand-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: #f5f0e8;
    color: #111;
    border: 2px solid #ccc;
    border-radius: 6px;
    padding: .35rem .55rem;
    min-width: 46px;
    font-family: monospace;
    transition: transform .1s;
}
.hand-card.red { color: #c00; }

.hand-card.playable {
    background: #e0c88a;
    border-color: #b89030;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.hand-card.playable.red { color: #900; }
.hand-card.playable:hover { background: #f0d860; transform: translateY(-3px); }

.hand-card.disabled {
    background: #2e2e3e;
    color: #555;
    border-color: #3a3a4a;
    cursor: default;
}
.hand-card.disabled.red { color: #733; }

.card-glyph-sm { font-size: 1.6rem; line-height: 1.1; }

/* ---- Status line + advance row (always present → no layout shift) ---- */

.status-line  { font-size: .9rem; min-height: 1.4rem; margin: .3rem 0; }
.trick-done   { color: #7ecb7e; }
.last-trick   { color: #888; }

.advance-row  { min-height: 2.6rem; margin-top: .5rem; }
.advance-btn  { background: #2a5f2a; color: #eee; font-size: 1rem; padding: .5rem 1.2rem; }
.advance-btn:hover { background: #3a8a3a; }

/* ---- Trump picker ---- */

.trump-options { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }
.trump-btn  { background: #3a3060; color: #eee; font-size: 1rem; }
.trump-btn:hover { background: #5040a0; }
.pass-btn   { background: #5a3020; color: #eee; }
.pass-btn:hover { background: #8a4020; }

/* ---- Wys declare ---- */

.wys-list  { margin: .5rem 0; }
.wys-item  { background: #1e3a5c; border-radius: 4px; padding: .3rem .6rem; margin: .2rem 0; color: #9de; }
.wys-actions { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.primary-btn { background: #2a6a3a; color: #eee; font-size: 1rem; padding: .5rem 1.2rem; }
.primary-btn:hover { background: #3a9050; }

/* ---- Summaries ---- */

.hand-summary table, .match-over table {
    border-collapse: collapse;
    margin: .75rem 0;
}
.hand-summary td, .hand-summary th,
.match-over  td, .match-over  th {
    padding: .3rem .8rem;
    border: 1px solid #333;
    text-align: right;
}
.hand-summary th, .match-over th { color: #e0c88a; }
.hand-summary td:first-child, .match-over td:first-child { text-align: left; color: #aaa; }

.schneider-badge { color: #88ccff; font-size: 1.2rem; margin: .5rem 0; }