/* =========================================================================
   Turnauspalvelu – ulkoasu
   Lähtökohta: turnausteltan seinälle teipattu A3-otteluohjelma. Tiheä,
   taulukkomainen ja luettava kirkkaassa auringossa puhelimen ruudulta.
   ========================================================================= */

:root {
    --muste:      #12281F;   /* tumma nurmi, tekstit ja otsikkopalkit   */
    --nurmi:      #1E5B44;   /* keskisävy, painikkeet ja korostukset    */
    --nurmi-hei:  #2E7C5E;
    --liitu:      #F6F7F3;   /* sivun tausta, kalkkiviivan valkoinen    */
    --paperi:     #FFFFFF;
    --viiva:      #DCE2D6;   /* hiusviivat                              */
    --viiva-tumma:#B9C4B2;
    --signaali:   #E3A81E;   /* käynnissä olevat ottelut, huomiot       */
    --tiili:      #A83A28;   /* virheet, perutut ottelut                */
    --harmaa:     #63705F;   /* toissijainen teksti                     */
    --harmaa-vaal:#8B978A;

    --leveys:     1180px;
    --pyoristys:  3px;
    --varjo:      0 1px 2px rgba(18, 40, 31, .08), 0 4px 12px rgba(18, 40, 31, .05);

    --kirjain: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif;
    --numero: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--kirjain);
    font-size: 15px;
    line-height: 1.5;
    color: var(--muste);
    background: var(--liitu);
    font-variant-numeric: tabular-nums;
}

a { color: var(--nurmi); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--signaali); outline-offset: 2px; }

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .75rem; }

/* --- Rakenne ---------------------------------------------------------- */

.kuori { max-width: var(--leveys); margin: 0 auto; padding: 0 1rem; }
.sisalto { padding: 1.5rem 0 4rem; }
.pinota > * + * { margin-top: 1.25rem; }

/* --- Ylätunniste ------------------------------------------------------ */

.ylapalkki {
    background: var(--muste);
    color: #E8EDE6;
    border-bottom: 3px solid var(--signaali);
}
.ylapalkki .kuori { display: flex; align-items: center; gap: 1.25rem; min-height: 58px; flex-wrap: wrap; }
.merkki { display: flex; align-items: baseline; gap: .5rem; color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.merkki:hover { text-decoration: none; }
.merkki span { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--signaali); }
.paavalikko { display: flex; gap: .25rem; margin-left: auto; flex-wrap: wrap; }
.paavalikko a, .paavalikko button {
    color: #C9D5C6; padding: .4rem .7rem; border-radius: var(--pyoristys);
    font-size: .88rem; font-weight: 600; background: none; border: 0; cursor: pointer;
    font-family: inherit;
}
.paavalikko a:hover, .paavalikko button:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.paavalikko a.on { background: var(--nurmi); color: #fff; }

/* --- Välilehdet -------------------------------------------------------- */

.valilehdet {
    display: flex; gap: 0; overflow-x: auto; background: var(--paperi);
    border: 1px solid var(--viiva); border-radius: var(--pyoristys); margin-bottom: 1.25rem;
}
.valilehdet a {
    padding: .6rem .9rem; font-size: .88rem; font-weight: 600; color: var(--harmaa);
    white-space: nowrap; border-bottom: 3px solid transparent;
}
.valilehdet a:hover { background: var(--liitu); text-decoration: none; }
.valilehdet a.on { color: var(--muste); border-bottom-color: var(--nurmi); }

/* --- Kortit ------------------------------------------------------------ */

.kortti {
    background: var(--paperi); border: 1px solid var(--viiva);
    border-radius: var(--pyoristys); box-shadow: var(--varjo);
}
.kortti > .otsikko {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .7rem 1rem; border-bottom: 1px solid var(--viiva); background: #FBFCFA;
}
.kortti > .otsikko h2, .kortti > .otsikko h3 { margin: 0; }
.kortti > .runko { padding: 1rem; }
.kortti > .runko.tiivis { padding: 0; }

.silmalappu {
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--harmaa);
}

.ruudukko { display: grid; gap: 1rem; }
.ruudukko.k2 { grid-template-columns: repeat(2, 1fr); }
.ruudukko.k3 { grid-template-columns: repeat(3, 1fr); }
.ruudukko.k4 { grid-template-columns: repeat(4, 1fr); }
.ruudukko.sivu { grid-template-columns: 2fr 1fr; align-items: start; }

/* --- Etusivun aloitus -------------------------------------------------- */

.aloitus {
    background: var(--muste);
    color: #E8EDE6;
    padding: 2.5rem 0 2rem;
    position: relative;
    overflow: hidden;
}
/* Kalkkiviiva: keskiympyrä ja keskiviiva, kuten kentän piirustuksessa */
.aloitus::before {
    content: ""; position: absolute; top: 50%; right: -60px;
    width: 260px; height: 260px; transform: translateY(-50%);
    border: 2px solid rgba(255,255,255,.09); border-radius: 50%;
}
.aloitus::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 70px;
    width: 2px; background: rgba(255,255,255,.09);
}
.aloitus .kuori { position: relative; z-index: 1; }
.aloitus h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); color: #fff; max-width: 20ch; }
.aloitus p.johdanto { color: #B7C6B4; max-width: 52ch; font-size: 1.02rem; }

.hakupalkki { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.25rem; }
.hakupalkki input[type=search], .hakupalkki select {
    flex: 1 1 200px; min-width: 0; padding: .6rem .7rem; font-size: 1rem;
    border: 1px solid transparent; border-radius: var(--pyoristys); font-family: inherit;
}
.pikalinkit { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; font-size: .85rem; }
.pikalinkit a { color: var(--signaali); }

/* --- Painikkeet -------------------------------------------------------- */

.nappi {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem .9rem; font-size: .9rem; font-weight: 600; font-family: inherit;
    border: 1px solid var(--nurmi); border-radius: var(--pyoristys);
    background: var(--nurmi); color: #fff; cursor: pointer; text-decoration: none;
}
.nappi:hover { background: var(--nurmi-hei); border-color: var(--nurmi-hei); text-decoration: none; color: #fff; }
.nappi.reunus { background: var(--paperi); color: var(--muste); border-color: var(--viiva-tumma); }
.nappi.reunus:hover { background: var(--liitu); color: var(--muste); }
.nappi.vaara { background: var(--tiili); border-color: var(--tiili); }
.nappi.vaara:hover { background: #8E2E1F; border-color: #8E2E1F; }
.nappi.pieni { padding: .3rem .55rem; font-size: .8rem; }
.nappi:disabled { opacity: .5; cursor: not-allowed; }
.napit { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* --- Lomakkeet --------------------------------------------------------- */

label { display: block; font-size: .82rem; font-weight: 600; color: var(--harmaa); margin-bottom: .2rem; }
input[type=text], input[type=search], input[type=email], input[type=tel], input[type=url],
input[type=password], input[type=number], input[type=date], input[type=time],
input[type=datetime-local], select, textarea {
    width: 100%; padding: .45rem .55rem; font-size: .95rem; font-family: inherit;
    color: var(--muste); background: var(--paperi);
    border: 1px solid var(--viiva-tumma); border-radius: var(--pyoristys);
}
input:focus, select:focus, textarea:focus { border-color: var(--nurmi); }
textarea { min-height: 5rem; resize: vertical; line-height: 1.45; }
.kentta { margin-bottom: .9rem; }
.kentta .ohje { font-size: .78rem; color: var(--harmaa); font-weight: 400; margin-top: .2rem; }
.rivi { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.valinta { display: flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 600; color: var(--muste); margin-bottom: .35rem; }
.valinta input { width: auto; margin: 0; }
fieldset { border: 1px solid var(--viiva); border-radius: var(--pyoristys); padding: .9rem; margin: 0 0 1rem; }
legend { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--harmaa); padding: 0 .35rem; }

/* --- Taulukot ---------------------------------------------------------- */

.taulukko-kuori { overflow-x: auto; }
table.taulu { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.taulu th {
    text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--harmaa); background: #FBFCFA;
    padding: .5rem .6rem; border-bottom: 1px solid var(--viiva-tumma); white-space: nowrap;
}
table.taulu td { padding: .5rem .6rem; border-bottom: 1px solid var(--viiva); vertical-align: middle; }
table.taulu tbody tr:hover { background: #FAFBF8; }
table.taulu td.numero, table.taulu th.numero { text-align: right; font-family: var(--numero); font-size: .85rem; }
table.taulu td.keski, table.taulu th.keski { text-align: center; }
table.taulu tr.karsiva td { border-bottom: 2px solid var(--viiva-tumma); }

/* --- Otteluruutu: sivuston tunnistettava elementti --------------------- */

.ottelulista { display: flex; flex-direction: column; }
.ottelu {
    display: grid;
    grid-template-columns: 3.4rem 1fr auto 1fr 6.5rem;
    align-items: center; gap: .5rem;
    padding: .55rem .75rem; border-bottom: 1px solid var(--viiva);
    color: inherit;
}
.ottelu:hover { background: #FAFBF8; text-decoration: none; }
.ottelu:last-child { border-bottom: 0; }
.ottelu .kello { font-family: var(--numero); font-size: .95rem; font-weight: 700; }
.ottelu .paiva { font-size: .68rem; color: var(--harmaa); display: block; font-family: var(--kirjain); font-weight: 600; }
.ottelu .koti  { text-align: right; font-weight: 600; }
.ottelu .vieras{ text-align: left;  font-weight: 600; }
.ottelu .lisa  { font-size: .72rem; color: var(--harmaa); text-align: right; }
.ottelu .lisa b { display: block; font-weight: 600; color: var(--muste); }

.tulosruutu {
    font-family: var(--numero); font-size: .95rem; font-weight: 700;
    background: var(--muste); color: #fff; padding: .2rem .5rem;
    border-radius: 2px; min-width: 3.4rem; text-align: center; letter-spacing: .02em;
}
.tulosruutu.tyhja { background: transparent; color: var(--harmaa-vaal); border: 1px dashed var(--viiva-tumma); }
.tulosruutu.kaynnissa { background: var(--signaali); color: var(--muste); }
.tulosruutu.peruttu { background: var(--tiili); font-size: .7rem; letter-spacing: .06em; }

.voittaja { color: var(--muste); }
.havinnyt { color: var(--harmaa); font-weight: 500; }

/* --- Merkinnät --------------------------------------------------------- */

.lipuke {
    display: inline-block; padding: .12rem .4rem; border-radius: 2px;
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    background: var(--liitu); color: var(--harmaa); border: 1px solid var(--viiva);
}
.lipuke.nurmi { background: #E4F0E8; color: #1B5340; border-color: #C4DDCE; }
.lipuke.signaali { background: #FBEFD1; color: #7A5806; border-color: #F0DCA6; }
.lipuke.tiili { background: #F7E2DE; color: #872D1E; border-color: #EBC4BC; }

.muoto { display: inline-flex; gap: 2px; }
.muoto i {
    width: 1.05rem; height: 1.05rem; border-radius: 2px; font-style: normal;
    font-size: .65rem; font-weight: 700; display: grid; place-items: center; color: #fff;
}
.muoto i.V { background: var(--nurmi); }
.muoto i.T { background: var(--harmaa-vaal); }
.muoto i.H { background: var(--tiili); }

/* --- Ilmoitukset ------------------------------------------------------- */

.viesti {
    padding: .7rem .9rem; border-radius: var(--pyoristys); font-size: .9rem;
    border: 1px solid; margin-bottom: .75rem; display: flex; gap: .5rem; align-items: flex-start;
}
.viesti.ok    { background: #E7F2EA; border-color: #BEDCC7; color: #1B5340; }
.viesti.error { background: #F9E6E2; border-color: #EBC4BC; color: #872D1E; }
.viesti.warn  { background: #FCF2DA; border-color: #F0DCA6; color: #6F5006; }
.viesti.tieto { background: #EDF1F5; border-color: #CBD6E0; color: #33475B; }

.tyhja-tila { text-align: center; padding: 2.5rem 1rem; color: var(--harmaa); }
.tyhja-tila h3 { color: var(--muste); }

/* --- Edistyminen ------------------------------------------------------- */

.palkki { height: 6px; background: var(--viiva); border-radius: 3px; overflow: hidden; }
.palkki i { display: block; height: 100%; background: var(--nurmi); }

.luvut { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--viiva); }
.luvut > div { background: var(--paperi); padding: .8rem 1rem; }
.luvut .arvo { font-family: var(--numero); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.luvut .nimi { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--harmaa); font-weight: 700; }

/* --- Kenttäkartta: turnausteltan seinätaulu ---------------------------- */

.kenttakartta { overflow-x: auto; }
.kenttakartta table { border-collapse: collapse; width: 100%; min-width: 640px; }
.kenttakartta th {
    background: var(--muste); color: #fff; font-size: .72rem; letter-spacing: .08em;
    text-transform: uppercase; padding: .5rem .6rem; text-align: left; position: sticky; top: 0;
}
.kenttakartta th.aika { width: 4.5rem; }
.kenttakartta td { border: 1px solid var(--viiva); padding: 0; vertical-align: top; width: auto; }
.kenttakartta td.aika {
    font-family: var(--numero); font-weight: 700; font-size: .85rem;
    background: #FBFCFA; padding: .5rem .6rem; white-space: nowrap; text-align: right;
}
.ruutu { display: block; padding: .45rem .55rem; font-size: .82rem; color: inherit; border-bottom: 1px dashed var(--viiva); }
.ruutu:last-child { border-bottom: 0; }
.ruutu:hover { background: #FAFBF8; text-decoration: none; }
.ruutu .parit { font-weight: 600; }
.ruutu .meta { font-size: .7rem; color: var(--harmaa); display: flex; gap: .4rem; justify-content: space-between; }

/* --- Tulosten kirjaus -------------------------------------------------- */

.kirjaus { display: grid; grid-template-columns: 3rem 1fr 8.5rem 1fr auto; gap: .5rem; align-items: center;
    padding: .5rem .6rem; border-bottom: 1px solid var(--viiva); }
.kirjaus:hover { background: #FAFBF8; }
.kirjaus .maalit { display: flex; gap: .3rem; align-items: center; justify-content: center; }
.kirjaus .maalit input {
    width: 3rem; text-align: center; font-family: var(--numero); font-weight: 700; font-size: 1rem; padding: .3rem;
}
.kirjaus .maalit span { color: var(--harmaa); font-weight: 700; }
.kirjaus.tallennettu { background: #F0F7F2; }
.kirjaus .tila { font-size: .72rem; color: var(--harmaa); min-width: 4.5rem; text-align: right; }

/* --- Sivupalkki ja luettelot ------------------------------------------- */

.luettelo { list-style: none; margin: 0; padding: 0; }
.luettelo li { padding: .5rem .75rem; border-bottom: 1px solid var(--viiva); display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.luettelo li:last-child { border-bottom: 0; }
.luettelo .apu { font-size: .78rem; color: var(--harmaa); }

.turnauskortti { display: block; padding: .85rem 1rem; border-bottom: 1px solid var(--viiva); color: inherit; }
.turnauskortti:last-child { border-bottom: 0; }
.turnauskortti:hover { background: #FAFBF8; text-decoration: none; }
.turnauskortti .nimi { font-weight: 700; font-size: 1rem; }
.turnauskortti .meta { font-size: .82rem; color: var(--harmaa); display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .15rem; }

/* --- Alatunniste ------------------------------------------------------- */

.alapalkki {
    border-top: 1px solid var(--viiva); background: var(--paperi);
    padding: 1.5rem 0; font-size: .82rem; color: var(--harmaa);
}
.alapalkki .kuori { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: space-between; }

/* --- Apuluokat --------------------------------------------------------- */

.vain-lukija { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oikealle { text-align: right; }
.harmaa { color: var(--harmaa); }
.pieni { font-size: .82rem; }
.nowrap { white-space: nowrap; }
.erotin { border: 0; border-top: 1px solid var(--viiva); margin: 1.25rem 0; }
.valissa { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* --- Kapea näyttö ------------------------------------------------------ */

@media (max-width: 820px) {
    .ruudukko.k3, .ruudukko.k4, .ruudukko.k2, .ruudukko.sivu { grid-template-columns: 1fr; }
    .ottelu { grid-template-columns: 3.2rem 1fr auto 1fr; row-gap: .2rem; }
    .ottelu .lisa { grid-column: 2 / -1; text-align: left; display: flex; gap: .5rem; }
    .ottelu .lisa b { display: inline; }
    .kirjaus { grid-template-columns: 1fr 8.5rem 1fr; }
    .kirjaus .nro, .kirjaus .tila { grid-column: 1 / -1; text-align: left; }
    .aloitus::before, .aloitus::after { display: none; }
}

@media (max-width: 520px) {
    body { font-size: 14px; }
    .ottelu { grid-template-columns: 1fr auto 1fr; }
    .ottelu .kello { grid-column: 1 / -1; display: flex; gap: .5rem; align-items: baseline; }
    .ottelu .paiva { display: inline; }
}

/* --- Tulostus ---------------------------------------------------------- */

@media print {
    body { background: #fff; font-size: 10pt; }
    .ylapalkki, .alapalkki, .valilehdet, .napit, .hakupalkki, .ei-tulostu { display: none !important; }
    .kortti { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
    .ottelu, table.taulu tr { break-inside: avoid; }
    a { color: #000; text-decoration: none; }
    .kuori { max-width: none; padding: 0; }
    .tulosruutu { background: #fff; color: #000; border: 1px solid #000; }
}

/* --- Ottelukartta: raahattava aikataulu ------------------------------- */

.kartta-tyokalut {
    display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center;
    background: var(--paperi); border: 1px solid var(--viiva); border-radius: var(--pyoristys);
    padding: .6rem .8rem; margin-bottom: 1.25rem; box-shadow: var(--varjo);
}
.kartta-tyokalut form { display: flex; gap: .4rem; align-items: center; margin: 0; }
.kartta-tyokalut input, .kartta-tyokalut select { width: auto; }
.kartta-tyokalut .silmalappu { white-space: nowrap; }

.ruudukko.kartta-asettelu { grid-template-columns: 1fr 15rem; align-items: start; }

.kartta-kuori { overflow: auto; max-height: 74vh; }

.ottelukartta { --pxmin: 1.5; --sarakkeita: 1; min-width: 100%; }

.kartta-otsikot,
.kartta-runko {
    display: grid;
    grid-template-columns: 3.6rem repeat(var(--sarakkeita), minmax(9rem, 1fr));
}
.kartta-otsikot {
    position: sticky; top: 0; z-index: 4;
    background: var(--muste); color: #fff;
}
.kartta-kentta, .kartta-kulma {
    padding: .45rem .6rem; font-size: .72rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
    border-left: 1px solid rgba(255,255,255,.14);
}
.kartta-kulma { border-left: 0; }

.kartta-runko { position: relative; }

.kartta-aikajana { position: relative; border-right: 1px solid var(--viiva-tumma); background: #FBFCFA; }
.kartta-viiva { position: absolute; left: 0; right: 0; }
.kartta-viiva span {
    position: absolute; right: .4rem; top: -.55rem;
    font-family: var(--numero); font-size: .68rem; color: var(--harmaa-vaal);
}
.kartta-viiva.tunti span { color: var(--muste); font-weight: 700; font-size: .72rem; }

.kartta-sarake { position: relative; border-left: 1px solid var(--viiva); }
.kartta-apuviiva { position: absolute; left: 0; right: 0; height: 1px; background: var(--viiva); opacity: .55; }
.kartta-apuviiva.tunti { opacity: 1; background: var(--viiva-tumma); }
.kartta-sarake.kohde { background: #F0F7F2; }

.kartta-ottelu {
    position: absolute; overflow: hidden;
    background: var(--paperi); border: 1px solid var(--viiva-tumma);
    border-left: 4px solid var(--nurmi); border-radius: 2px;
    padding: .25rem .4rem; font-size: .78rem; line-height: 1.25;
    cursor: grab; touch-action: none; user-select: none;
    box-shadow: 0 1px 2px rgba(18,40,31,.09);
}
.kartta-ottelu:hover { border-color: var(--nurmi); z-index: 2; }
.kartta-ottelu:focus-visible { outline: 3px solid var(--signaali); outline-offset: 1px; z-index: 3; }
.kartta-ottelu.pelattu { border-left-color: var(--harmaa-vaal); background: #F7F8F5; }
.kartta-ottelu.ristiriita { border-color: var(--tiili); border-left-color: var(--tiili); background: #FCF1EF; }
.kartta-ottelu.varoitus { border-left-color: var(--signaali); background: #FEFAF0; }

.kartta-ottelu.raahataan {
    position: fixed; z-index: 60; cursor: grabbing;
    box-shadow: 0 8px 24px rgba(18,40,31,.25); opacity: .95;
    transform: rotate(-.4deg); pointer-events: none;
}

.kartta-kahva { display: flex; justify-content: space-between; gap: .3rem; align-items: baseline; }
.kartta-aika { font-family: var(--numero); font-weight: 700; font-size: .8rem; }
.kartta-nro { font-size: .66rem; color: var(--harmaa); }
.kartta-parit { font-weight: 600; margin-top: .1rem; }
.kartta-meta { font-size: .68rem; color: var(--harmaa); margin-top: .1rem; }

.kartta-muokkaa {
    position: absolute; right: .2rem; bottom: .2rem;
    font-family: inherit; font-size: .66rem; font-weight: 700;
    background: var(--liitu); color: var(--harmaa);
    border: 1px solid var(--viiva); border-radius: 2px;
    padding: .05rem .3rem; cursor: pointer; opacity: 0;
}
.kartta-ottelu:hover .kartta-muokkaa,
.kartta-ottelu:focus-within .kartta-muokkaa { opacity: 1; }
.kartta-muokkaa:hover { background: var(--nurmi); color: #fff; border-color: var(--nurmi); }

.kartta-lomake {
    position: absolute; left: 0; right: 0; top: 0; z-index: 20;
    background: var(--paperi); border: 2px solid var(--nurmi); border-radius: 2px;
    padding: .5rem; display: grid; gap: .35rem; font-size: .78rem;
    box-shadow: 0 6px 18px rgba(18,40,31,.2); min-width: 11rem;
}
.kartta-lomake label { display: grid; gap: .1rem; font-size: .68rem; }
.kartta-lomake input, .kartta-lomake select { padding: .25rem .35rem; font-size: .82rem; }
.kartta-lomake .napit { gap: .3rem; }
.kartta-ottelu.muokataan { overflow: visible; height: auto !important; min-height: 0; z-index: 30; cursor: default; }

.kartta-jono { display: grid; gap: .5rem; }
.kartta-ottelu.tarjottimella {
    position: static; height: auto; width: auto; left: auto; top: auto;
    border-left-color: var(--signaali);
}
.kartta-jono.kohde { background: #F0F7F2; outline: 2px dashed var(--nurmi); outline-offset: -4px; }

.kartta-vihje {
    position: fixed; z-index: 70; pointer-events: none;
    background: var(--muste); color: #fff; font-family: var(--numero);
    font-size: .8rem; font-weight: 700; padding: .2rem .45rem; border-radius: 2px;
}

@media (max-width: 900px) {
    .ruudukko.kartta-asettelu { grid-template-columns: 1fr; }
    .kartta-kuori { max-height: 65vh; }
}

@media print {
    .kartta-tyokalut, .kartta-muokkaa { display: none !important; }
    .kartta-kuori { max-height: none; overflow: visible; }
}