/* Generelt */
body { font-family: sans-serif; background: #f0f0f0; margin: 0; padding: 0; text-align: center; }
h1 { margin: 20px 0; color: #333; }
.btn { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; text-decoration: none; display: inline-block; color: white; margin: 5px; }
.btn-green { background: #28a745; }
.btn-blue { background: #007bff; }
.btn-grey { background: #6c757d; }
.btn:hover { opacity: 0.9; }

/* Menu (index.php) */
.menu-container { display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center; height: 100vh; }
.menu-card { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 300px; }

/* Grid Styles (Fælles for Spil og Oversigt) */
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; padding: 10px; }
.grid-item { background: white; border: 1px solid #ccc; border-radius: 5px; padding: 5px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; aspect-ratio: 0.8/1; position: relative; }
.grid-item img { width: 80%; max-height: 60%; object-fit: contain; }
.grid-item .num { font-weight: bold; font-size: 1.2em; color: #007bff; }
.grid-item .name { font-size: 0.8em; color: #555; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }

/* Spil Specifikt */
.called::after { content: "✓"; position: absolute; inset: 0; background: rgba(40, 167, 69, 0.7); color: white; display: flex; align-items: center; justify-content: center; font-size: 3em; border-radius: 5px; }
.top-bar { background: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; position: sticky; top: 0; z-index: 100; }
.content-area { padding: 20px; height: calc(100vh - 80px); overflow-y: auto; }

/* Print Plader (A4) */
.sheets-container { display: flex; flex-direction: column; gap: 15px; align-items: center; margin-top: 20px; }
.banko-card { background: #fff; border: 2px solid #000; padding: 5px; width: 95%; max-width: 800px; page-break-inside: avoid; }
.banko-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; height: 90px; margin-bottom: 2px; }
.banko-cell { border: 1px solid #ccc; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px; position: relative; }
.banko-cell img { width: 100%; height: 70%; object-fit: contain; }
.banko-cell span { font-weight: bold; font-size: 14px; position: absolute; bottom: 2px; right: 2px; }

/* Modal */
#modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 999; }
#banko-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 10px; z-index: 1000; text-align: center; width: 80%; max-width: 400px; }
#modal-img { max-width: 100%; max-height: 40vh; }
#modal-title { font-size: 3em; margin: 0; }

@media print {
    .no-print { display: none !important; }
    body { background: white; }
    .banko-card { border: 2px solid black; box-shadow: none; margin-bottom: 10mm; }
    .overview-card { border: none; }
    @page { margin: 10mm; }
}