/* file: data/static/card_game.css */

.mtg-cards-hand { display:flex; flex-wrap:wrap; gap:1.1em; margin-bottom:2em;}
.mtg-card {
    border:1.5px solid #b7a45e;
    background: #fffbe8;
    border-radius: 13px;
    padding: 10px;
    width: 220px;
    box-shadow: 1px 1px 6px #b6b0a0;
    position: relative;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
    font-size: smaller;
}
.mtg-img { max-width:96%; border-radius:8px; margin:8px 0;}
.mtg-title { font-weight:bold; font-size:1.08em; color:#3a2e13;}
.mtg-set { color:#84763d; margin-bottom:4px;}
.mtg-type { font-size:0.97em; color:#42390c;}
.mtg-text { font-size:0.97em; color:#1b180a; margin:5px 0 5px 0; white-space:pre-line;}
.mtg-pt { color:#4e4415;}

@media (min-width:600px) {
    .mtg-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 32px; }
}
@media (max-width:599px) {
    .mtg-grid { display:block; }
}
.mtg-form-row {
    margin-bottom:18px;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.mtg-label-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.mtg-form-row label {
    margin:0;
    font-weight:500;
    font-size:larger;
    color:#5a5100;
}
.mtg-form-row input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    font-size: 1em;
    padding: 5px 8px;
    box-sizing: border-box;
}
.mtg-random-btn {
    background:none;
    border:none;
    cursor:pointer;
    color:#84763d;
    font-size:1.1em;
    padding:2px 3px;
    transition:color 0.15s;
}
.mtg-random-btn:hover { color:#ff8800; }
.mtg-hand-full {
    background:#ffefb3;
    color:#593e00;
    padding:14px 18px;
    border-radius:12px;
    margin-bottom:1.6em;
}
.mtg-search-form {
    width: 100%;
    margin: 0 auto 12px auto;
    padding: 16px 0;
}
.mtg-search-form.no-cards {
    padding-top: 32px;
    padding-bottom: 32px;
}
.mtg-search-form .search-btn {
    min-width: 320px;
    margin: 18px 0 0 0;
    display: block;
    font-size: 1.25em;
    padding: 12px 0;
    border-radius: 7px;
    background: #1566e6;
    color: #fff;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
}
.mtg-search-form .search-btn:hover {
    background: #00397a;
}

.mtg-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    margin-top: 18px;
}
.mtg-status .search-btn {
    margin-right: auto;
}
.mtg-status span {
    font-weight: 600;
    color: #5a5100;
}
.mtg-life button {
    margin-left: 4px;
    padding: 2px 8px;
    min-width: 28px;
    font-size: 1em;
}
