:root {
    --ink-blood: #880000;
    --ink-dark: #2c1e16;
    --paper-texture: url('paper.jpg');
    --coin-url: url('coin.png');
}

* { box-sizing: border-box; }

body {
    background: url('bg.jpg') no-repeat center center fixed;
    background-size: cover;
    font-family: 'Almendra', serif;
    margin: 0; padding: 0;
    display: flex; justify-content: center; align-items: center;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    color: var(--ink-dark);
}

.parchment-frame {
    background: var(--paper-texture);
    background-size: cover;
    width: 98vw; height: 95vh;
    height: 95dvh;
    border: clamp(8px, 2.5vw, 20px) solid transparent;
    border-image: var(--paper-texture) 30 stretch;
    box-shadow: 0 0 150px rgba(0,0,0,1);
    display: flex; flex-direction: column;
    position: relative;
}

h1 {
    font-family: 'MedievalSharp', cursive;
    text-align: center;
    font-size: clamp(1.4rem, 6vw, 4.5rem);
    color: #ffffff;
    margin: clamp(4px, 1.5vw, 10px) 0;
    text-transform: uppercase;
    letter-spacing: clamp(1px, 1vw, 8px);
    text-shadow: 4px 4px 8px rgba(0,0,0,0.8);
}

.scroll-container {
    flex-grow: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 clamp(4px, 1.5vw, 15px) clamp(8px, 3vw, 25px) clamp(4px, 1.5vw, 15px);
    scrollbar-width: none;
}
.scroll-container::-webkit-scrollbar { display: none; }

table { border-collapse: collapse; width: 100%; background: transparent; }

thead th {
    position: sticky; top: 0;
    background: #d4c5a7;
    z-index: 10;
    padding: clamp(8px, 2.5vw, 25px) clamp(6px, 1.5vw, 15px);
    font-family: 'MedievalSharp';
    font-size: clamp(0.95rem, 2.4vw, 2.2rem);
    border-bottom: 6px solid var(--ink-dark);
    color: #000;
    text-shadow: 1px 1px 0px white;
    white-space: nowrap;
}

.school-name-cell {
    position: sticky; left: 0;
    background: #e4d5b7;
    z-index: 5;
    text-align: left;
    font-weight: 800;
    font-size: clamp(1.1rem, 3.4vw, 3.2rem);
    color: var(--ink-blood);
    padding: clamp(8px, 2.5vw, 20px) clamp(10px, 3.5vw, 40px);
    border-right: 5px solid var(--ink-dark);
    border-bottom: 2px solid rgba(0,0,0,0.15);
    text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
    white-space: nowrap;
}

.score-cell {
    text-align: center;
    font-size: clamp(1rem, 2.8vw, 3rem);
    font-weight: 800;
    color: #000;
    padding: clamp(8px, 2vw, 20px);
    border-bottom: 2px solid rgba(0,0,0,0.1);
    min-width: clamp(90px, 18vw, 220px);

    background-image: var(--coin-url) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: clamp(46px, 10vw, 110px) !important;

    text-shadow: 2px 2px 0px #fff, -1px -1px 0px #fff;
}

.total-score-cell, .header-total {
    position: sticky; right: 0;
    background: #d4c5a7;
    z-index: 5;
    font-weight: 900;
    font-size: clamp(1.4rem, 5vw, 5.5rem);
    color: #000;
    text-align: center;
    border-left: 10px solid var(--ink-dark);
    padding: clamp(8px, 2.5vw, 15px) clamp(12px, 4.5vw, 50px);
    border-bottom: 2px solid rgba(0,0,0,0.1);
    background-image: none !important;
    text-shadow: 3px 3px 0px rgba(255,255,255,0.8);
}

thead th:first-child { z-index: 15; left: 0; border-right: 5px solid var(--ink-dark); }
thead th:last-child { z-index: 15; right: 0; border-left: 10px solid var(--ink-dark); }

tr:nth-child(even) td.score-cell { background-color: rgba(0,0,0,0.03); }
tr:nth-child(odd) td.score-cell { background-color: transparent; }

tr:first-child td.school-name-cell { color: #b8860b !important; }
tr:first-child td.score-cell { filter: saturate(1.8); background-color: rgba(184, 134, 11, 0.1) !important; }
tr:first-child td.total-score-cell { color: #ffcc00 !important; text-shadow: 3px 3px 6px #000 !important; }

.school-icon {
    width: clamp(34px, 8vw, 70px);
    height: clamp(34px, 8vw, 70px);
    margin-right: clamp(8px, 2.5vw, 20px);
    vertical-align: middle;
}

.hidden { display: none; }

/* Karty pre mobil - namiesto širokej tabuľky (kde by bolo so sticky
   stĺpcami vidno len jednu hru naraz) je každá škola samostatná karta
   so zoznamom hier pod sebou, takže sa celé dá scrollovať len nadol. */
.card-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 2px 16px;
}

.team-card {
    background: #e4d5b7;
    border: 2px solid var(--ink-dark);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.team-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 3px solid var(--ink-dark);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.team-card-name {
    flex: 1;
    min-width: 0;
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--ink-blood);
    text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
}

.team-card-total {
    font-weight: 900;
    font-size: 1.7rem;
    color: #000;
}

.team-card:first-child {
    border-color: #b8860b;
    box-shadow: 0 0 16px rgba(184, 134, 11, 0.6);
}
.team-card:first-child .team-card-name { color: #b8860b; }
.team-card:first-child .team-card-total { color: #b8860b; }

.game-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    font-size: 1rem;
}
.game-row:last-child { border-bottom: none; }

.game-row-name { font-weight: 600; }

.game-row-score {
    font-weight: 800;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--coin-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 44px;
}

@media (max-width: 480px) {
    .parchment-frame { width: 100vw; height: 100dvh; border-width: 6px; }
    .scroll-container { overflow-x: hidden; }
}