/* Reliable Import for Beleren Font */
@import url('https://fonts.cdnfonts.com/css/beleren-caps');

:root {
    --bg: #353030;
    --tile-bg: #121213;
    --border: #3a3a3c;
    --text: #ffffff;
    --key-bg: #818384;
    --correct: #538d4e;
    --present: #b59f3b;
    --absent: #3a3a3c;
    --orange: #ff5722;
}

body { 
    background: var(--bg); 
    color: var(--text); 
    /* Keep body readable, but fallback to sans-serif */
    font-family: 'Segoe UI', Tahoma, sans-serif; 
    margin: 0; 
    display: flex; 
    justify-content: center; 
    height: 100svh;
    overflow: hidden;
}

/* Apply the MTG font to Title, Tiles, Keys, Modals, and Hints */
h1, .tile, .key, #modal-title, #hint-container, #share-btn { 
    font-family: 'Beleren Caps', serif !important; 
    text-transform: uppercase;
    letter-spacing: 1px; /* Adds that official card title look */
}

#game-container { 
    width: 100%; 
    max-width: clamp(320px, 90vw, 520px); 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 6px 10px 0; 
    box-sizing: border-box;
}

/* ================================
   HEADER
================================ */
header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top-bar { 
    display: flex; 
    justify-content: center;
    width: 100%; 
    position: relative;
    margin-bottom: 6px;
}

h1 { 
    margin: 0; 
    letter-spacing: clamp(2px, 0.8vw, 4px); 
    font-size: clamp(1.4rem, 4vw, 2.2rem); 
    font-weight: 900; 
    text-align: center;
}

#stats-btn { 
    position: absolute; 
    right: 0; 
    font-size: 1.4rem; 
    cursor: pointer; 
}

/* ================================
   BOARD
================================ */
#board { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: clamp(4px, 1vw, 8px); 
    width: 100%; 
    justify-content: center; 
}

.row { 
    display: flex; 
    gap: clamp(4px, 1vw, 6px); 
    width: 100%; 
    height: clamp(38px, 9vw, 60px); 
    justify-content: center; 
}

.tile { 
    flex: 1; 
    max-width: clamp(38px, 9vw, 60px); 
    height: 100%; 
    border: 2px solid var(--border); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-weight: bold; 
    font-size: clamp(1rem, 3vw, 1.5rem); 
    background: var(--tile-bg); 
    text-transform: uppercase; 
}

.static-tile { 
    border: none !important; 
    background: transparent !important; 
    flex: 0.4; 
}

/* ================================
   HINTS & ART
================================ */
#hint-container { 
    min-height: 40px; 
    font-size: clamp(0.85rem, 2.5vw, 1.05rem); 
    font-weight: 600; 
    display: flex; 
    flex-wrap: wrap; 
    gap: clamp(8px, 3vw, 15px); 
    color: #ccc; 
    justify-content: center; 
    align-items: center; 
    margin-bottom: 4px;
}

.mana-icon { font-size: 1.4rem; }

#art-container { 
    height: clamp(70px, 18vw, 120px); 
    margin-bottom: 6px; 
}

#art-container img { 
    height: 100%; 
    border-radius: 8px; 
    border: 2px solid var(--border); 
}

/* ================================
   KEYBOARD
================================ */
#keyboard { 
    width: 100%; 
    padding-bottom: env(safe-area-inset-bottom);
}

.key-row { 
    display: flex; 
    justify-content: center; 
    width: 100%; 
    margin-bottom: clamp(5px, 1vw, 8px); 
    gap: clamp(3px, 1vw, 6px); 
}

.key { 
    background: var(--key-bg); 
    color: white; 
    border: 0; 
    height: clamp(42px, 10vw, 58px); 
    border-radius: 4px; 
    cursor: pointer; 
    font-weight: bold; 
    flex: 1; 
    font-size: clamp(0.65rem, 2.2vw, 0.95rem); 
}

.key[data-key="ENTER"], 
.key[data-key="BACKSPACE"] { 
    flex: 1.6; 
}

/* ================================
   MODAL
================================ */
#modal-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.85); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 9999; 
}

#modal-content { 
    background: #121213; 
    padding: clamp(15px, 4vw, 30px); 
    border-radius: 15px; 
    width: clamp(280px, 90vw, 380px); 
    text-align: center; 
    position: relative; 
    border: 1px solid var(--border); 
}

#full-card-image { 
    width: 100%; 
    border-radius: 10px; 
    margin-top: 15px; 
}

#close-modal { 
    position: absolute; 
    top: 10px; 
    right: 15px; 
    background: none; 
    border: none; 
    color: white; 
    font-size: clamp(1.6rem, 5vw, 2.2rem); 
    cursor: pointer; 
}

.hidden { display: none !important; }

/* ================================
   TILE STATES
================================ */
.correct { background: var(--correct) !important; border-color: var(--correct) !important; }
.present { background: var(--present) !important; border-color: var(--present) !important; }
.absent { background: var(--absent) !important; border-color: var(--absent) !important; }

/* ================================
   RARITY COLORS
================================ */
.ss-common { color: #ffffff; }
.ss-uncommon { color: #b4b4b4; }
.ss-rare { color: #c5a039; }
.ss-mythic { color: #d35400; }

/* ================================
   SMALL HEIGHT SAFETY
================================ */
@media (max-height: 650px) {
    #art-container { display: none; }
    #hint-container { min-height: 30px; }
}

#dev-tools {
    display: none !important;
}