/* AV Automation – etusivun omat tyylit (siirretty index.html:stä 1.5.16). Muutoksen jälkeen nosta ?v=… index.html:ssä. */
    .service-card i { font-size: 2rem; }
    .project-link { font-weight: 600; }
    /* AV Automation -logo harmaan maisemakuvan päällä */
    .masthead-logo {
      display: block;
      max-width: 320px;
      width: 70%;
      margin: 0 auto 1.5rem;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
    }
    /* Yläpalkin logot (COTWP, Seikkailija Nella ja iSkate).
       --s = logon korkeus; kaikki koot säädetään tästä yhdestä muuttujasta. */
    #mainNav { --s: 190px; }
    /* Kaikki kolme logoa täsmälleen samankokoisia neliöitä (leveys = korkeus = --s).
       box-sizing määritetään tässä itse, ettei koko riipu muista tyylitiedostoista. */
    .nav-cotwp-logo, .nav-nella-logo, .nav-anton-logo, .nav-iskate-logo, .nav-kekri-logo, .nav-lion-logo {
      box-sizing: border-box !important;
      width: var(--s) !important;
      height: var(--s) !important;
      min-width: var(--s) !important;
      min-height: var(--s) !important;
      max-width: none !important;
      max-height: none !important;
      flex: 0 0 auto;
      border: 2px solid #e8b64c;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
      transition: width .3s ease, height .3s ease, min-width .3s ease;
    }
    .nav-cotwp-logo { object-fit: cover; }
    /* Nella-logo keskellä tummaa neliötä, jotta vaaleat tekstit erottuvat */
    .nav-nella-logo {
      object-fit: contain;
      padding: 4px;
      background: #0b1622;
    }
    /* iSkate-logo: kuvassa on omat pyöristetyt kulmat, joten reunus seuraa niitä */
    .nav-iskate-logo {
      object-fit: cover;
      border-color: #ffcf33;
      border-radius: 18%;
      background: #15171d;
    }
    /* UUTTA!-merkki logon oikeaan yläkulmaan (kolme logoa ei mahdu muuten riville) */
    .logo-wrap { position: relative; display: inline-block; }
    .navbar-brand .badge-uutta {
      position: absolute; top: -8px; right: -10px; margin: 0 !important;
      font-size: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.45); z-index: 2;
    }
    .navbar-brand .ml-3 { margin-left: 1.4rem !important; }
    /* iSkaten työkalumerkki: peli on vielä työn alla */
    .navbar-brand .badge-tyo {
      width: 2.2em; height: 2.2em; padding: 0 !important;
      display: flex !important; align-items: center; justify-content: center;
      border-radius: 50%; background: #ffcf33; color: #15171d;
      border: 2px solid #15171d; animation: none;
    }
    .navbar-brand .badge-tyo svg { display: block; }
    /* Kun sivua vieritetään, logot pienenevät, ettei palkki peitä sisältöä */
    #mainNav.navbar-shrink { --s: 64px; }
    @media (min-width: 992px) { #mainNav.navbar-shrink .navbar-brand .ml-3 { margin-left: .9rem !important; } }
    @media (min-width: 992px) and (max-width: 1199px) {
      #mainNav.navbar-shrink { --s: 50px; }
      #mainNav.navbar-shrink .navbar-brand .ml-3 { margin-left: .7rem !important; }
      #mainNav.navbar-shrink .navbar-collapse { margin-left: 1rem !important; }
    }
    #mainNav.navbar-shrink .navbar-brand .badge-uutta { font-size: .7rem; top: -6px; right: -8px; }
    @media (min-width: 992px) and (max-width: 1199px) {
      #mainNav:not(.navbar-shrink) { --s: 150px; }
    }
    @media (max-width: 575px) {
      #mainNav { --s: 48px; }
      #mainNav.navbar-shrink { --s: 40px; }
      .navbar-brand .badge-uutta,
      #mainNav.navbar-shrink .navbar-brand .badge-uutta {
        font-size: .58rem; padding: .2em .45em; top: -6px; right: -8px;
      }
      .navbar-brand .ml-3 { margin-left: .6rem !important; }
    }
    @media (max-width: 374px) {
      #mainNav { --s: 38px; }
      #mainNav.navbar-shrink { --s: 34px; }
      .navbar-brand .ml-3 { margin-left: .5rem !important; }
      .navbar-toggler { font-size: .8rem; padding: .25rem .5rem; }
    }
    .navbar-brand a, .navbar-brand a:hover { text-decoration: none; }
    /* "UUTTA!"-merkki COTWP-logon vieressä */
    .badge-uutta {
      display: inline-block;
      padding: .25em .6em;
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: .05em;
      color: #fff;
      background: #d9342b;
      border-radius: 1em;
      animation: uutta-pulse 1.8s ease-in-out infinite;
    }
    @keyframes uutta-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.12); }
    }
    .cotwp-img { width: 100%; height: 100%; object-fit: cover; }
    /* ---- Yläpalkki: kiinteä vaalea tausta kaikilla näytöillä ----
       Sivun sisältö ei enää liu'u palkin taakse näkyviin. Sivun yläreunaan
       jätetään palkin korkuinen tila (asetetaan JavaScriptillä, ks. alla). */
    #mainNav {
      background: #ffffff !important;
      box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
    }
    #mainNav.mitataan, #mainNav.mitataan * { transition: none !important; }

    /* Valikkolinkit tietokoneella: isot, selkeät napit */
    @media (min-width: 992px) {
      /* Isot logot ja valikko eivät mahdu samalle riville, joten sivun
         yläreunassa valikko on logojen alla omalla rivillään. Vieritettäessä
         logot pienenevät ja kaikki mahtuu yhdelle riville. */
      #mainNav > .container { flex-wrap: wrap !important; }
      #mainNav { padding-top: .9rem !important; padding-bottom: .7rem !important; }
      /* Keskitys: logot keskellä ja valikko keskellä niiden alla */
      #mainNav > .container { justify-content: center !important; }
      #mainNav .navbar-brand { margin-right: 0 !important; }
      #mainNav .navbar-nav { margin-left: 0 !important; }
      #mainNav:not(.navbar-shrink) .navbar-collapse {
        flex-basis: 100% !important; justify-content: center !important; margin-top: .7rem;
      }
      /* Vieritettynä: pienet logot ja valikko rinnakkain, koko rivi keskellä */
      #mainNav.navbar-shrink .navbar-collapse {
        flex-basis: auto !important; flex-grow: 0 !important; margin-left: 2rem;
      }
      #mainNav .navbar-nav { align-items: center; gap: .4rem; }
      #mainNav .navbar-nav .nav-item .nav-link {
        font-size: 1.1rem !important;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #15171d !important;
        padding: .55rem 1.05rem !important;
        border-radius: 999px;
        background: #eef0f2;
        text-shadow: none;
        transition: background .2s ease, color .2s ease;
        text-decoration: none !important;
      }
      #mainNav .navbar-nav .nav-item .nav-link:hover,
      #mainNav .navbar-nav .nav-item .nav-link:focus,
      #mainNav .navbar-nav .nav-item .nav-link.active {
        background: #e8b64c;
        color: #15171d !important;
      }
      #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link {
        font-size: .95rem !important;
        padding: .45rem .8rem !important;
      }
    }
    @media (min-width: 992px) and (max-width: 1199px) {
      #mainNav .navbar-nav .nav-item .nav-link { font-size: .95rem !important; padding: .5rem .8rem !important; }
      #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link { font-size: .8rem !important; padding: .4rem .5rem !important; letter-spacing: .02em; }
    }
    /* ---- Mobiili: AVA-logo ja otsikkotekstit tarkasti keskelle ----
       Teeman iso otsikko (AVAUTOMATION) ja sen leveä kirjainväli eivät
       mahtuneet puhelimen näytölle, jolloin teksti valui oikealle. */
    @media (max-width: 991px) {
      .masthead { height: auto !important; min-height: calc(100vh - 100px); padding: 2.5rem 0 3rem !important; }
      .masthead .container { justify-content: center; }
      .masthead .container > .mx-auto { width: 100%; }
      .masthead-logo { width: 62% !important; max-width: 260px; margin: 0 auto 1.4rem !important; }
      .masthead h1 {
        font-size: clamp(1.5rem, 8.5vw, 3.2rem) !important;
        line-height: 1.2 !important;
        letter-spacing: .12em !important;
        padding-left: .12em;          /* tasaa kirjainvälin, jotta sana on keskellä */
        white-space: nowrap;
        text-align: center;
      }
      .masthead h2 {
        font-size: 1.05rem !important;
        line-height: 1.5;
        max-width: 22rem !important;
        margin-left: auto !important; margin-right: auto !important;
        padding: 0 .75rem;
        text-align: center;
      }
      .masthead .btn { display: inline-block; }
    }
    /* Kävijälaskuri */
    .laskuri-section { background: #15171d; color: #f4efe6; padding: 5rem 0 4rem; }
    .laskuri-section h2 { color: #e8b64c; }
    .laskuri-since { color: #9aa0a6; font-size: .95rem; }
    .laskuri-alaotsikko { color: #c9d3d1; letter-spacing: .08em; text-transform: uppercase; }
    .laskuri-card {
      background: #1f232c; border: 1px solid rgba(232,182,76,.35); border-radius: 12px;
      padding: 1.1rem .6rem; text-align: center; height: 100%;
    }
    .laskuri-logo { position: relative; width: 72px; height: 72px; margin: 0 auto .6rem; }
    .laskuri-iso .laskuri-logo { width: 96px; height: 96px; }
    .laskuri-logo img {
      width: 100%; height: 100%; box-sizing: border-box;
      border: 2px solid #e8b64c; border-radius: 12px; object-fit: cover; background: #0b1622;
    }
    .laskuri-logo img.ll-nella { object-fit: contain; padding: 3px; }
    .laskuri-logo img.ll-contain { object-fit: contain; background: #fff; padding: 3px; }
    .laskuri-logo img.ll-ava { object-fit: contain; background: #fff; padding: 4px; }
    .laskuri-merkki {
      position: absolute; right: -9px; bottom: -9px; width: 28px; height: 28px; border-radius: 50%;
      background: #e8b64c; color: #15171d; display: flex; align-items: center; justify-content: center;
      font-size: .8rem; box-shadow: 0 2px 6px rgba(0,0,0,.5);
    }
    .laskuri-luku { font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
    .laskuri-nimi { color: #b9bec4; font-size: .95rem; margin-top: .25rem; }
    .laskuri-iso { border-width: 2px; border-color: #e8b64c; padding: 1.5rem .6rem; }
    .laskuri-iso .laskuri-luku { font-size: 2.8rem; color: #e8b64c; }
    /* COTWP: logo ja teksti keskellä allekkain kaikilla näytöillä */
    .cotwp-keski .cotwp-img { width: 100%; max-width: 480px; height: auto; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
    .cotwp-keski .featured-text { max-width: 640px; margin: 0 auto; padding: 1.5rem 1rem 0 !important; }
    .cotwp-keski .btn-group { justify-content: center; }
    /* Tietokoneella COTWP-logo täsmälleen yhtä leveä kuin Seikkailija Nella -laatikko
       (sama sarake ja sama reunatila kuin Nellan laatikolla) */
    @media (min-width: 768px) {
      .cotwp-keski .cotwp-img { max-width: none; width: 100%; }
    }
    /* Esittelyvideon sulkeminen */
    .video-kehys { position: relative; }
    .video-sulje-x {
      position: absolute; top: 10px; right: 10px; z-index: 5;
      width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff;
      background: rgba(0,0,0,.65); color: #fff; font-size: 28px; line-height: 1;
      display: flex; align-items: center; justify-content: center; cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,.5);
    }
    .video-sulje-x:hover, .video-sulje-x:focus { background: #e8b64c; color: #15171d; border-color: #e8b64c; outline: none; }
    .btn-sulje-video {
      background: #eef0f2; color: #15171d; font-weight: 700; border-radius: 999px;
      padding: .55rem 1.4rem; border: 0;
    }
    .btn-sulje-video:hover, .btn-sulje-video:focus { background: #e8b64c; color: #15171d; }
    @media (max-width: 575px) {
      .video-sulje-x { width: 38px; height: 38px; font-size: 24px; top: 6px; right: 6px; }
      .btn-sulje-video { width: 100%; max-width: 280px; padding: .7rem 1rem; }
    }
    /* Piilotettu laskurien nollaus */
    .laskuri-section .container { position: relative; }
    .laskuri-hallinta { position: absolute; right: 15px; bottom: -2.5rem; text-align: right; }
    .laskuri-lukko {
      background: none; border: 0; color: #f4efe6; opacity: .18; padding: 6px; cursor: pointer;
      transition: opacity .2s ease;
    }
    .laskuri-lukko:hover, .laskuri-lukko:focus { opacity: .7; outline: none; }
    .laskuri-nollaus {
      position: absolute; right: 0; bottom: 34px; width: 240px; text-align: left;
      background: #1f232c; border: 1px solid #e8b64c; border-radius: 10px; padding: .8rem;
      box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 10;
    }
    .nollaus-otsikko { color: #e8b64c; font-weight: 700; margin-bottom: .5rem; font-size: .95rem; }
    .btn-nollaa { background: #c9433a; color: #fff; font-weight: 700; }
    .btn-nollaa:hover { background: #a8352d; color: #fff; }
    .nollaus-peru { color: #b9bec4; }
    .nollaus-viesti { color: #f4efe6; font-size: .85rem; margin-top: .4rem; min-height: 1.2em; }
    .btn-arkisto { background: #e8b64c; color: #15171d; font-weight: 700; }
    .btn-arkisto:hover { background: #f2c865; color: #15171d; }
    .laskuri-nollaus { width: 270px; }
    /* Arkistoikkuna */
    .arkisto-tausta {
      position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.7);
      align-items: center; justify-content: center; padding: 16px;
    }
    .arkisto-ikkuna {
      position: relative; background: #1f232c; color: #f4efe6; border: 2px solid #e8b64c;
      border-radius: 14px; padding: 1.5rem; width: 100%; max-width: 1100px; max-height: 90vh; overflow: auto;
      box-shadow: 0 12px 40px rgba(0,0,0,.6);
    }
    .arkisto-ikkuna h4 { color: #e8b64c; margin: 0 2.5rem .4rem 0; }
    .arkisto-ohje { color: #b9bec4; font-size: .9rem; }
    .arkisto-sulje {
      position: absolute; top: 10px; right: 12px; width: 38px; height: 38px; border-radius: 50%;
      border: 0; background: #2c313c; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
    }
    .arkisto-sulje:hover { background: #e8b64c; color: #15171d; }
    .arkisto-taulu-kehys { overflow-x: auto; }
    .arkisto-taulu { width: 100%; border-collapse: collapse; font-size: .9rem; }
    .arkisto-taulu th, .arkisto-taulu td { padding: .5rem .6rem; border-bottom: 1px solid rgba(255,255,255,.1); text-align: right; white-space: nowrap; }
    .arkisto-taulu th { color: #e8b64c; font-weight: 700; position: sticky; top: 0; background: #1f232c; }
    .arkisto-taulu th:first-child, .arkisto-taulu td.arkisto-jakso { text-align: left; }
    .arkisto-taulu td { font-variant-numeric: tabular-nums; }
    .arkisto-nykyinen td { background: rgba(232,182,76,.12); font-weight: 700; }
    .arkisto-tyhja { text-align: center !important; color: #9aa0a6; white-space: normal !important; padding: 1rem !important; }
    /* Löytöretkeilijä Anton */
    .nav-anton-logo { object-fit: cover; background: #000; border-color: #e8b64c; }
    .navbar-brand .badge-tulossa { background: #e8b64c; color: #2a1c08; animation: none; letter-spacing: .04em; }
    .anton-card {
      background: linear-gradient(180deg, #1c150f 0%, #0d0a07 100%);
      border: 2px solid #e8b64c; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.35);
    }
    .anton-kuva { width: 100%; height: auto; border-radius: 10px; }
    .anton-title { color: #f2c865; }
    .anton-text { color: #d9cdb8; }
    .anton-tyo {
      display: inline-flex; align-items: center; gap: .4rem;
      background: #e8b64c; color: #2a1c08; font-weight: 800; letter-spacing: .04em;
      padding: .35rem .8rem; border-radius: 999px; text-transform: uppercase; font-size: .85rem;
    }
    .btn-anton { background: #e8b64c; border-color: #e8b64c; color: #2a1c08; font-weight: 700; }
    .btn-anton:hover, .btn-anton:focus { background: #f2c865; border-color: #f2c865; color: #2a1c08; }
    .anton-link, .anton-link:hover { color: #e8b64c; }
    .btn-outline-anton { background: transparent; border: 2px solid #e8b64c; color: #e8b64c; font-weight: 700; }
    .btn-outline-anton:hover, .btn-outline-anton:focus { background: #e8b64c; color: #2a1c08; }
    .anton-kuva { transition: transform .2s ease; }
    /* "Made with AI" -leima: ensin sormipainike, painettaessa 3D-leimasin painaa leiman */
    .leima-kohde { position: relative; }
    .cotwp-leimakehys { position: relative; display: inline-block; max-width: 480px; width: 100%; }
    @media (max-width: 991.98px) { .cotwp-leimakehys { max-width: none; } }
    .ai-leima-paikka {
      --pieni: 104px; --iso: 250px;
      position: absolute; top: 12px; right: 12px; z-index: 3; width: var(--pieni); height: var(--pieni);
    }
    .ai-leima-paikka.kaynnissa { z-index: 25; }
    .ai-leima-nappi {
      width: 100%; height: 100%; border-radius: 50%; padding: 0; cursor: pointer;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
      background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), rgba(0,0,0,.45) 70%);
      border: 2px dashed rgba(242,200,114,.85); color: #f7ecd2;
      font: 700 11px/1.15 Nunito, sans-serif; text-align: center; letter-spacing: .02em;
      box-shadow: 0 6px 18px rgba(0,0,0,.35); backdrop-filter: blur(2px);
      transition: transform .2s ease, opacity .25s ease, border-color .2s ease;
      animation: leimaNappiHengitys 2.8s ease-in-out infinite;
    }
    .ai-leima-nappi svg { width: 38px; height: 38px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
    .ai-leima-nappi:hover, .ai-leima-nappi:focus { transform: scale(1.06); border-style: solid; border-color: #f2c872; outline: none; }
    .ai-leima-nappi.piilossa { opacity: 0; transform: scale(.6); pointer-events: none; animation: none; }
    .ai-leima-vaalea .ai-leima-nappi { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.3), rgba(20,24,30,.62) 72%); }
    @keyframes leimaNappiHengitys { 0%,100% { box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 0 rgba(242,200,114,.0); }
      50% { box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 6px rgba(242,200,114,.22); } }
    /* Iso leima ja leimasin (kasvavat paikan oikeasta yläkulmasta sisäänpäin) */
    .ai-leima-iso {
      position: absolute; top: 0; right: 0; width: var(--iso); height: var(--iso);
      pointer-events: none;
    }
    .ai-leima-kuva {
      position: absolute; inset: 0; background: center / contain no-repeat; opacity: 0;
      transform: rotate(-4deg); filter: drop-shadow(0 8px 18px rgba(0,0,0,.5));
    }
    .ai-leima-dark .ai-leima-kuva    { background-image: url(../img/upotetut/ai-leima-v6a.webp?v=1.5.10); }
    .ai-leima-classic .ai-leima-kuva { background-image: url(../img/upotetut/ai-leima-v6a.webp?v=1.5.10); }
    .ai-leima-red .ai-leima-kuva     { background-image: url(../img/upotetut/ai-leima-v6a.webp?v=1.5.10); }
    .leimasin-varjo {
      position: absolute; left: 8%; top: 8%; width: 84%; height: 84%; border-radius: 50%;
      background: radial-gradient(circle, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 70%); opacity: 0;
    }
    .leimasin-kehys { position: absolute; inset: 0; perspective: 900px; opacity: 0; }
    .leimasin { position: absolute; inset: 0; transform-style: preserve-3d; }
    .leimasin-kerros { position: absolute; border-radius: 50%; left: 50%; top: 50%; backface-visibility: visible; }
    @media (max-width: 767.98px) {
      .ai-leima-paikka { --pieni: 72px; --iso: 216px; top: 8px; right: 8px; }
      .ai-leima-nappi { font-size: 8.5px; gap: 0; }
      .ai-leima-nappi svg { width: 26px; height: 26px; }
    }
    @media (prefers-reduced-motion: reduce) { .ai-leima-nappi { animation: none; } }
    /* Tietokoneella tekstisarake ei jää leimapainikkeen alle */
    @media (min-width: 768px) { .leima-kohde .card-body > .row > [class*="col-md-"]:last-child { padding-right: 118px; } }
    /* Pelien äänet: kaiutinpainike vasemmassa alakulmassa */
    .aani-nappi {
      position: fixed; left: 16px; bottom: 16px; z-index: 1040; display: none;
      align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px; cursor: pointer;
      background: rgba(16,18,26,.88); color: #f2e6c8; border: 1px solid rgba(242,200,114,.7);
      font: 700 .95rem Nunito, sans-serif; box-shadow: 0 6px 18px rgba(0,0,0,.35);
    }
    .aani-nappi.nakyva { display: inline-flex; }
    .aani-nappi:hover, .aani-nappi:focus { background: #1c2030; outline: none; border-color: #f2c872; }
    .aani-nappi.odottaa { animation: leimaNappiHengitys 2.8s ease-in-out infinite; }
    .aani-nappi.pois { color: #9aa0ab; border-color: rgba(154,160,171,.5); }
    /* COTWP-sovelluksen avauspainike */
    .btn-cotwp {
      background: #e8b64c; border: 2px solid #e8b64c; color: #15171d; font-weight: 800;
      border-radius: 999px; padding: .75rem 1.8rem; letter-spacing: .03em;
      box-shadow: 0 6px 18px rgba(232,182,76,.35); transition: transform .15s ease, background .2s ease;
    }
    .btn-cotwp:hover, .btn-cotwp:focus { background: #f2c865; border-color: #f2c865; color: #15171d; transform: translateY(-2px); }
    /* Ohjelmien versionumerot (luetaan versiot.php:stä) */
    .versio-rivi {
      display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
      padding: .2rem .65rem; border-radius: 999px; margin-bottom: .6rem;
    }
    .versio-rivi[hidden] { display: none !important; }
    .versio-vaalea { background: #eef0f2; color: #3a3f47; }
    .versio-tumma { background: rgba(232,182,76,.15); color: #e8b64c; border: 1px solid rgba(232,182,76,.4); }
    /* Sammon kuiskaus: pelin osat symboleineen ja juonilaatikko */
    .sampo-kuvakehys { position: relative; }
    .sampo-symboli {
      position: absolute; top: 72.5%; width: 4.6%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
      border-radius: 50%; border: 2px solid transparent; background: transparent; padding: 0; cursor: help;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .sampo-symboli:hover, .sampo-symboli:focus, .sampo-symboli.aktiivinen {
      border-color: #f2c872; box-shadow: 0 0 12px 3px rgba(242,200,114,.75); outline: none;
    }
    .sampo-osat { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
    .sampo-osa {
      display: inline-flex; align-items: center; gap: .35rem; cursor: help;
      background: rgba(185,166,255,.1); border: 1px solid rgba(233,199,122,.55); color: #f2e6c8;
      border-radius: 999px; padding: .15rem .7rem .15rem .2rem; font-size: .85rem; font-weight: 600;
      transition: background .2s ease, border-color .2s ease;
    }
    .sampo-osa img { width: 26px; height: 26px; border-radius: 50%; }
    .sampo-osa:hover, .sampo-osa:focus, .sampo-osa.aktiivinen { background: rgba(233,199,122,.22); border-color: #f2c872; outline: none; }
    .sampo-juoni {
      position: absolute; left: 15px; right: 15px; top: calc(100% + .5rem); z-index: 40; text-align: left;
      background: linear-gradient(180deg, #232a55 0%, #12162c 100%); color: #e6e0f5;
      border: 1px solid #e9c77a; border-radius: 12px; padding: .8rem 1rem; font-size: .9rem; line-height: 1.45;
      box-shadow: 0 10px 28px rgba(0,0,0,.55); animation: sampoJuoniSisaan .18s ease-out;
    }
    .sampo-juoni[hidden] { display: none; }
    .sampo-juoni strong { display: flex; align-items: center; gap: .4rem; color: #f2c872; font-size: 1.02rem; }
    .sampo-juoni strong img { border-radius: 50%; }
    .sampo-juoni em { display: block; color: #c9c2ff; margin: .1rem 0 .35rem; }
    .sampo-juoni p { margin: 0; }
    @keyframes sampoJuoniSisaan { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
    .sampo-tulossa {
      display: inline-block; margin-left: .15rem; padding: .02rem .4rem; border-radius: 999px;
      background: #e9c77a; color: #1d1740; font-size: .66rem; font-weight: 800; letter-spacing: .04em;
      text-transform: uppercase; font-style: normal;
    }
    .sampo-osa-tulossa { border-style: dashed; }
    /* Palautepainike ja -lomake */
    .palaute-rivi { margin-top: .7rem; }
    .btn-palaute {
      position: relative; cursor: pointer; border: 1px solid #f7dc8f; border-radius: 999px;
      padding: .38rem 1.1rem; font-size: .95rem; font-weight: 800; color: #2a1c08;
      background: linear-gradient(110deg, #e8b64c 0%, #e8b64c 38%, #fff4c9 50%, #e8b64c 62%, #e8b64c 100%);
      background-size: 250% 100%; background-position: 100% 0;
      box-shadow: 0 0 0 0 rgba(242,200,114,.6), 0 4px 14px rgba(232,182,76,.35);
      animation: palauteHohto 3.2s ease-in-out infinite, palauteSyke 3.2s ease-in-out infinite;
      transition: transform .2s ease;
    }
    .btn-palaute:hover, .btn-palaute:focus { transform: translateY(-1px) scale(1.04); color: #1a1205; outline: none;
      animation-duration: 1.4s, 1.4s; }
    .btn-palaute-vaalea { border-color: #d9a53a; }
    @keyframes palauteHohto { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
    @keyframes palauteSyke { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,200,114,.55), 0 4px 14px rgba(232,182,76,.35); }
      60% { box-shadow: 0 0 0 7px rgba(242,200,114,0), 0 4px 14px rgba(232,182,76,.35); } }
    .kimallus {
      position: absolute; pointer-events: none; color: #fff6d0; font-size: 16px; line-height: 1;
      text-shadow: 0 0 6px #ffd76a, 0 0 12px #ffcf40; opacity: 0; animation: kimallus 2.4s ease-in-out infinite;
    }
    .kimallus.k1 { top: -9px; left: 10%; animation-delay: 0s; }
    .kimallus.k2 { top: -9px; right: 6%; font-size: 13px; animation-delay: .8s; }
    .kimallus.k3 { bottom: -10px; left: 45%; font-size: 12px; animation-delay: 1.6s; }
    .kimallus.k4 { top: 25%; right: -14px; font-size: 14px; animation-delay: 1.2s; }
    .btn-palaute:hover .kimallus { animation-duration: 1.1s; }
    @keyframes kimallus { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
      45% { opacity: 1; transform: scale(1.15) rotate(90deg); } 60% { opacity: .9; transform: scale(1) rotate(120deg); } }
    @media (prefers-reduced-motion: reduce) { .btn-palaute, .kimallus { animation: none; } .kimallus { opacity: .8; } }
    .palaute-ikkuna { max-width: 560px; color: #e6e6e6; text-align: left; }
    .palaute-ikkuna label { display: block; }
    .palaute-ikkuna .form-control { display: block; width: 100%; padding: .45rem .7rem; border-radius: 6px; font-size: 1rem; font-family: inherit; }
    .palaute-ikkuna label { color: #e8b64c; font-weight: 700; font-size: .9rem; margin-bottom: .25rem; }
    .palaute-ikkuna label small { color: #9aa0a6; font-weight: 400; }
    .palaute-ikkuna .form-control { background: #15181f; border: 1px solid #3a3f4a; color: #f1f1f1; }
    .palaute-ikkuna .form-control:focus { border-color: #e8b64c; box-shadow: 0 0 0 .15rem rgba(232,182,76,.25); }
    .palaute-pakollinen { color: #ff8a80; }
    .palaute-laskuri { text-align: right; color: #8a9099; font-size: .75rem; margin-bottom: .6rem; }
    .palaute-kaksi { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
    @media (max-width: 575px) { .palaute-kaksi { grid-template-columns: 1fr; } }
    .palaute-ansa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .palaute-napit { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; flex-wrap: wrap; }
    .palaute-tila { font-size: .92rem; }
    .palaute-tila.ok { color: #8fe3a8; }
    .palaute-tila.virhe { color: #ff9a8f; }
    .palaute-suodatin { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
    .palaute-suodatin button { background: #262a34; border: 1px solid #3a3f4a; color: #ddd; border-radius: 999px; padding: .15rem .7rem; font-size: .82rem; }
    .palaute-suodatin button.valittu { background: #e8b64c; color: #15171d; border-color: #e8b64c; }
    .palaute-lista { max-height: 65vh; overflow-y: auto; text-align: left; }
    .palaute-kortti { background: #1a1d25; border: 1px solid #333844; border-radius: 10px; padding: .75rem .9rem; margin-bottom: .6rem; }
    .palaute-kortti-otsa { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; font-size: .82rem; color: #9aa0a6; margin-bottom: .35rem; }
    .palaute-kortti-otsa strong { color: #e8b64c; font-size: .9rem; }
    .palaute-kortti-otsa a { color: #8cc8ff; }
    .palaute-kortti p { color: #eee; margin: 0; white-space: pre-wrap; word-break: break-word; }
    .palaute-poista { margin-left: auto; background: none; border: 0; color: #ff9a8f; font-size: .8rem; cursor: pointer; }
    [data-ohjekortti][hidden] { display: none !important; }
    /* Ohjekortti-ikkuna */
    .ohje-ikkuna { max-width: 980px; display: flex; flex-direction: column; height: 92vh; max-height: 92vh; }
    .ohje-napit { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .2rem 2.5rem .8rem 0; }
    .ohje-napit .btn { font-size: .95rem; font-weight: 700; padding: .42rem .95rem; line-height: 1.3; }
    .ohje-uusi { color: #e8b64c; }
    .ohje-tiedosto { color: #9aa0a6; font-size: .82rem; margin-left: auto; }
    .ohje-kehys { flex: 1; width: 100%; border: 0; border-radius: 8px; background: #fff; min-height: 300px; }
    /* Sammon kuiskaus: logo koko lohkon leveydelle, teksti vasemmalle ja painikkeet oikealle */
    .sampo-kuvasarake .kekri-ikoni { max-width: 100%; }
    .sampo-kuvasarake .sampo-juoni { left: 0; right: 0; margin: 0 auto; max-width: 640px; }
    .kekri-card .card-body > .row > .sampo-napit { padding-right: 15px !important; }
    .sampo-napit { display: flex; flex-direction: column; gap: .55rem; align-self: flex-start; padding-top: .3rem; }
    .sampo-napit .btn { display: block; width: 100%; margin: 0 !important; text-align: center; }
    .sampo-napit .palaute-rivi { margin-top: .35rem; text-align: center; }
    [data-kirja][hidden] { display: none !important; }
    @media (max-width: 767.98px) { .sampo-napit { margin-top: 1rem; } }
    /* Pelilohko, jossa logo koko leveydelle ja painikkeet allekkain oikealla (Anton) */
    .peli-kuvasarake img { max-width: 100%; }
    .card-body > .row > .peli-napit { padding-right: 15px !important; }
    .peli-napit { display: flex; flex-direction: column; gap: .55rem; align-self: flex-start; padding-top: .3rem; }
    .peli-napit .btn { display: block; width: 100%; margin: 0 !important; text-align: center; }
    .peli-napit .palaute-rivi { margin-top: .35rem; text-align: center; }
    @media (max-width: 767.98px) { .peli-napit { margin-top: 1rem; } }
    /* Sivun versio alatunnisteessa */
    .sivu-versio { margin-top: .35rem; font-size: .8rem; color: rgba(255,255,255,.45); letter-spacing: .02em; }
    /* PRIVATE-linkki yläpalkissa */
    #mainNav .nav-private { color: #b8860b !important; }
    #mainNav .nav-private:hover { color: #e8b64c !important; }
    .kekri-tyo.kekri-uusi { background: #e53935; color: #fff; letter-spacing: .04em; }
    /* Kielet, joilla ohjelma toimii */
    .kieli-rivi { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .8rem; margin-bottom: .7rem; }
    .kieli-rivi .kieli-otsikko { font-weight: 700; margin-right: .15rem; }
    .kieli-chip { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-weight: 600; }
    .kieli-chip.tulossa { font-style: italic; font-weight: 500; opacity: .8; border-style: dashed !important; }
    .kieli-tumma { color: #d9cdb8; }
    .kieli-tumma .kieli-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); color: #f1e9d8; }
    .kieli-vaalea { color: #3a3f47; }
    .kieli-vaalea .kieli-chip { background: #eef0f2; border: 1px solid #d5d9de; color: #3a3f47; }
    .cotwp-keski .kieli-rivi { justify-content: center; }
    @media (max-width: 767.98px) { .kieli-rivi { justify-content: center; } }
    /* Whispers of the Sampo – Sammon kuiskaus (entinen Kekri Village) */
    .btn-outline-kekri { background: transparent; border: 2px solid #e9c77a; color: #f2c872; font-weight: 700; }
    .btn-outline-kekri:hover, .btn-outline-kekri:focus { background: #e9c77a; color: #1d1740; }
    .kekri-link, .kekri-link:hover { color: #e9c77a; }

    .nav-kekri-logo { object-fit: cover; background: #0b0e1a; border-color: #e9c77a; border-radius: 18%; }

    .kekri-card {
      background: radial-gradient(circle at 25% 20%, #1d2244 0%, #0b0e1a 70%);
      border: 2px solid #b9a6ff; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.35);
    }
    .kekri-ikoni { width: 100%; height: auto; border-radius: 10px; border: 2px solid #e9c77a;
      box-shadow: 0 8px 26px rgba(0,0,0,.5); transition: transform .2s ease; }
    .kekri-title { color: #f2c872; }
    .kekri-ala { color: #c9c2ff; font-style: italic; font-weight: 400; font-size: .8em; }
    .kekri-text { color: #d9d4ee; }
    .kekri-ika { display: inline-block; font-size: .75rem; font-weight: 800; padding: .05rem .45rem; border-radius: 4px;
      background: #d0352a; color: #fff; margin-left: .3rem; vertical-align: middle; }
    .kekri-tyo {
      display: inline-flex; align-items: center; gap: .4rem;
      background: #ffcf33; color: #15171d; font-weight: 800; letter-spacing: .04em;
      padding: .35rem .8rem; border-radius: 999px; text-transform: uppercase; font-size: .85rem;
    }
    .btn-kekri { background: #5a4a9e; border: 2px solid #e9c77a; color: #fff6dc; font-weight: 700; }
    .btn-kekri:hover, .btn-kekri:focus { background: #6d5cc0; color: #fff; }
    .versio-kekri { background: rgba(185,166,255,.15); color: #c9c2ff; border: 1px solid rgba(185,166,255,.4); }
    /* iSkate-kortti pelin omissa väreissä */
    .iskate-card {
      background: radial-gradient(circle at 30% 20%, #262a35 0%, #15171d 70%);
      border: 2px solid #ffcf33;
      border-radius: 14px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
    }
    .iskate-kuva { width: 100%; max-width: 420px; height: auto; border-radius: 10px; transition: transform .2s ease; }
    .iskate-title { color: #ffcf33; }
    .iskate-text { color: #d6d1c7; }
    .btn-iskate { background: #ffcf33; border-color: #ffcf33; color: #15171d; font-weight: 700; }
    .btn-iskate:hover, .btn-iskate:focus { background: #ff6a3d; border-color: #ff6a3d; color: #fff; }
    /* Lohjan Autohaku -kortti sovelluksen väreissä */
    .autohaku-card {
      background: linear-gradient(160deg, #0f6f7f 0%, #0b5d6b 55%, #084a55 100%);
      border: 2px solid #9fd8de;
      border-radius: 14px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
    }
    .autohaku-kuva { width: 100%; max-width: 220px; height: auto; border-radius: 28px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
    .autohaku-title { color: #ffffff; }
    .autohaku-text { color: #d9eeef; }
    .btn-autohaku { background: #ffffff; border-color: #ffffff; color: #0b5d6b; font-weight: 700; }
    .btn-autohaku:hover, .btn-autohaku:focus { background: #d9eeef; border-color: #d9eeef; color: #084a55; }
    /* Seikkailija Nella -kortti logon väreissä */
    .nella-card {
      background: linear-gradient(180deg, #1a2c46 0%, #0b1622 100%);
      border: 2px solid #e8b64c;
      border-radius: 14px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
    }
    .nella-logo { width: 100%; max-width: 240px; height: auto; transition: transform .2s ease; }
    .nella-title { color: #e8b64c; }
    .nella-text { color: #c9d3d1; }
    .btn-nella {
      background: #e8b64c; border-color: #e8b64c; color: #0b1622; font-weight: 700;
    }
    .btn-nella:hover, .btn-nella:focus { background: #f2c865; border-color: #f2c865; color: #0b1622; }
    .btn-outline-nella { background: transparent; border: 2px solid #e8b64c; color: #e8b64c; font-weight: 700; }
    .btn-outline-nella:hover, .btn-outline-nella:focus { background: #e8b64c; color: #0b1622; }
    .nella-link, .nella-link:hover { color: #e8b64c; }
    /* Palvelukorttien otsikot: skaalautuu näytön mukaan, pysyy yhdellä rivillä */
    .service-title {
      font-size: clamp(1rem, 5.2vw, 1.5rem);
      letter-spacing: .05em;
      white-space: nowrap;
    }
    @media (max-width: 575px) {
      .service-card .card-body { padding-left: .75rem; padding-right: .75rem; }
    }

    /* Linkki pelien yhteiseen versiohistoriaan (versiohistoria/) */
    .historia-linkki { display: inline-block; font-size: .85rem; font-weight: 600; margin: .1rem .6rem .5rem 0; color: #e8c877 !important;
      opacity: .8; text-decoration: none !important; border-bottom: 1px dotted currentColor; }
    .historia-linkki:hover, .historia-linkki:focus-visible { opacity: 1; }
    .historia-linkki i { margin-right: .25rem; }
    /* ===== Kielivalinta FI | EN ===== */
    .kielivalinta { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
    .kielivalinta button { background: none; border: 0; padding: .1rem .25rem; font: inherit; letter-spacing: inherit;
      text-transform: inherit; color: inherit; opacity: .6; cursor: pointer; border-radius: 4px; }
    .kielivalinta button:hover, .kielivalinta button:focus-visible { opacity: 1; }
    .kielivalinta button.valittu { opacity: 1; font-weight: 800; color: #e8b64c; }
    .kielivalinta > span { opacity: .45; }
    #mainNav .kieli-valikko .kielivalinta { cursor: default; }
    .kieli-ala { margin-top: .6rem; font-size: .85rem; }
    .kieli-ala button { color: rgba(255,255,255,.6); text-transform: none; }
    /* Lion Production -logo: pieni yläpalkissa, iso ohjelmistojen alussa */
    .nav-lion-logo { object-fit: cover; border-color: #f0a24a !important; }
    .lion-rivi { margin-bottom: 2.5rem; }
    /* Kuusi logoa yläpalkissa: hieman pienemmät, jotta mahtuvat riville */
    @media (max-width: 575px) { #mainNav { --s: 42px; } #mainNav.navbar-shrink { --s: 36px; } }
    @media (min-width: 576px) and (max-width: 767px) { #mainNav:not(.navbar-shrink) { --s: 86px; } #mainNav.navbar-shrink { --s: 60px; } }
    @media (min-width: 768px) and (max-width: 991px) { #mainNav:not(.navbar-shrink) { --s: 120px; } #mainNav.navbar-shrink { --s: 64px; } }
    @media (max-width: 374px) { #mainNav { --s: 30px; } #mainNav.navbar-shrink { --s: 28px; } }
    .lion-iso { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
    /* Mobiili: yläpalkin kuvakkeet täyttävät rivin valikkonappiin asti */
    @media (max-width: 575px) {
      #mainNav { padding-left: 0; padding-right: 0; }
      #mainNav .container { padding-left: 10px; padding-right: 10px; max-width: none; }
      #mainNav .navbar-brand { flex: 1 1 0; min-width: 0; justify-content: space-between; margin-right: 10px !important; }
      #mainNav .navbar-brand .ml-3 { margin-left: 0 !important; }
      #mainNav { --s: min(76px, calc((100vw - 92px) / 5)); }
      #mainNav.navbar-shrink { --s: min(62px, calc((100vw - 92px) / 5 * .85)); }
      #mainNav .navbar-toggler { flex: 0 0 auto; width: 36px; padding: .45rem 0; font-size: 1rem; text-align: center; }
      /* UUTTA-merkki pieneksi lapuksi logon yläreunaan, ettei se peitä kuvaa */
      #mainNav .navbar-brand .badge-uutta,
      #mainNav.navbar-shrink .navbar-brand .badge-uutta { font-size: .42rem; line-height: 1.2; padding: .12em .4em; letter-spacing: .03em;
        top: -.75em; right: auto; left: 50%; transform: translateX(-50%); animation: none; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
      #mainNav .navbar-brand .badge-tyo,
      #mainNav.navbar-shrink .navbar-brand .badge-tyo { width: 15px; height: 15px; font-size: .5rem; left: auto; right: -5px; top: -6px; transform: none; border-width: 1px; }
      #mainNav .navbar-brand .badge-tyo svg { width: 9px; height: 9px; }
    }
    /* ===== AV Automation -logo (läpinäkyvä) + tehoste A: kiilto logon muodossa, salaman välähdys, kipinät ===== */
    .ava-m { position: relative; display: inline-block; line-height: 0; }
    .ava-m img { display: block; width: 100%; height: auto; }
    .ava-kiilto { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
      -webkit-mask: var(--ava-mask) center / contain no-repeat; mask: var(--ava-mask) center / contain no-repeat; }
    .ava-kiilto::after { content: ""; position: absolute; inset: -10%; transform: translateX(-120%);
      background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%); animation: ava-kiilto 4.5s ease-in-out infinite; }
    .ava-kiilto::before { content: ""; position: absolute; inset: 0; animation: ava-salama 7s infinite; }
    @keyframes ava-kiilto { 0%, 55% { transform: translateX(-120%); } 80%, 100% { transform: translateX(120%); } }
    @keyframes ava-salama { 0%, 90%, 100% { background: rgba(190,230,255,0); } 91% { background: rgba(200,235,255,.6); } 92% { background: rgba(190,230,255,0); }
      93.5% { background: rgba(200,235,255,.45); } 95% { background: rgba(190,230,255,0); } }
    .ava-kipina { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 3px #9fe3ff; opacity: 0; animation: ava-kipina 3.2s infinite; }
    @keyframes ava-kipina { 0%, 70%, 100% { opacity: 0; transform: scale(.2); } 80% { opacity: 1; transform: scale(1); } }
    /* vaakalogo: merkki + nimi + toimialat */
    .ava-vaaka { display: inline-flex; align-items: center; gap: .6em; text-decoration: none !important; line-height: 1.05; }
    .ava-vaaka .ava-m { width: 3.4em; }
    .ava-vaaka .ava-m img { filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
    .ava-sana { text-align: left; }
    .ava-sana b { display: block; font-family: 'Varela Round', Nunito, sans-serif; font-size: 1.3em; letter-spacing: .05em; font-weight: 700;
      background: linear-gradient(180deg, #9fd0ff, #2f7fd6); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .ava-sana b span { background: linear-gradient(180deg, #ffe07a, #e8a72c); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .ava-sana i { display: block; font-style: normal; font-size: .5em; letter-spacing: .16em; text-transform: uppercase; color: #cfd8dc;
      margin-top: .45em; padding-top: .4em; border-top: 1px solid rgba(232,182,76,.6); white-space: nowrap; }
    @media (prefers-reduced-motion: reduce) { .ava-kiilto::after, .ava-kiilto::before, .ava-kipina { animation: none; } }
    .ava-iso { width: min(340px, 72%); margin: 0 auto 1.5rem; }
    .ava-iso picture { display: block; }
    .ava-iso img { filter: drop-shadow(0 10px 22px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(120,200,255,.35)); }
    .ava-ala { font-size: clamp(14px, 5.2vw, 1.45rem); margin: 0 auto 1.2rem; }
    /* ===== Käytettävyyskorjaukset 2.10.2026 (sivun versio 1.5.0) ===== */
    /* Matala näyttö: yläpalkin isot logot mitoitetaan näytön korkeuden mukaan */
    @media (min-width: 1200px) and (max-height: 900px) { #mainNav:not(.navbar-shrink) { --s: clamp(90px, 18vh, 190px); } }
    @media (min-width: 992px) and (max-width: 1199px) and (max-height: 900px) { #mainNav:not(.navbar-shrink) { --s: clamp(90px, 18vh, 150px); } }
    /* Vieritettynä pienet logot ja valikko mahtuvat samalle riville */
    @media (min-width: 992px) { #mainNav.navbar-shrink .container { max-width: 100%; } }
    /* Kontrastit */
    .btn-primary { background-color: #3a7672 !important; border-color: #3a7672 !important; }
    .btn-primary:hover, .btn-primary:focus { background-color: #2d5e5b !important; border-color: #2d5e5b !important; }
    .btn-outline-primary.video-lang:not(.active) { color: #0a58ca; border-color: #0a58ca; }
    .masthead h1 { filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
    .masthead h2.text-white-50 { color: rgba(255,255,255,.88) !important; text-shadow: 0 2px 8px rgba(0,0,0,.75); }
    #projects .text-black-50, #services .text-black-50, #signup .text-black-50 { color: rgba(0,0,0,.7) !important; }
    .project-link, #signup .card a, #cotwp .small a { color: #2a6965; }
    /* Valittu kieli yläpalkissa: tumma teksti kultaisella pohjalla (näkyy vaalealla palkilla) */
    #mainNav .kielivalinta button.valittu { background: #e8b64c; color: #15171d; border-radius: 6px; padding: .1rem .4rem; }
    /* Kosketusalueet */
    #signup .card a { display: inline-block; padding: .55rem .5rem; font-size: .95rem; }
    .historia-linkki { display: inline-block; padding: .5rem .25rem; }
    #cotwp .small a { display: inline-block; padding: .45rem .35rem; }
    .sampo-symboli::after { content: ""; position: absolute; inset: -6px; }
    /* Tietosuoja */
    .tietosuoja-rivi a { color: rgba(255,255,255,.72); text-decoration: underline; display: inline-block; padding: .35rem .5rem; }
    .palaute-tietosuoja { font-size: .85rem; opacity: .85; margin: .6rem 0 0; }
    .palaute-tietosuoja a { color: inherit; text-decoration: underline; }
    /* Puhelin: kelluva ääninappi pois (äänet löytyvät valikosta), AI-leiman painike pieneksi kuvakkeeksi */
    @media (max-width: 767.98px), (pointer: coarse) { .aani-nappi, .aani-nappi.nakyva { display: none !important; } }
    @media (max-width: 767.98px) {
      .ai-leima-paikka { --pieni: 46px; }
      .ai-leima-nappi span { display: none; }
      .ai-leima-nappi svg { width: 24px; height: 24px; }
    }
    /* Sammon kuiskaus: leveä logo yläpalkissa (korkeus sama kuin muilla logoilla) ja DEMO-merkki */
    #mainNav .navbar-brand img.nav-kekri-logo { width: calc(var(--s) * 1.5) !important; min-width: calc(var(--s) * 1.5) !important; border-radius: 12px; }
    @media (min-width: 768px) and (max-width: 991px) { #mainNav:not(.navbar-shrink) { --s: 112px; } }
    @media (min-width: 576px) and (max-width: 767px) { #mainNav:not(.navbar-shrink) { --s: 80px; } }
    @media (max-width: 575px) { #mainNav { --s: min(76px, calc((100vw - 92px) / 5.5)); } #mainNav.navbar-shrink { --s: min(62px, calc((100vw - 92px) / 5.5 * .85)); } }

    /* --- Sivun loppuosan tyylit (versiomerkit) --- */
    .nappi-versio { display: inline-block; margin-left: .45em; padding: 0 .42em; border-radius: .7em; font-size: max(.78em, 11px); font-weight: 700;
      line-height: 1.55; vertical-align: .15em; letter-spacing: .02em; border: 1px solid currentColor; opacity: .82; white-space: nowrap; }

/* 1.5.18: Lipova TULOSSA -nauha ja Lipova3-kurkistus (5 s) */
.lipova-vaihto{position:relative}
.lipova-vaihto .lipova-2{display:block;width:100%;height:auto;transition:opacity .5s ease}
.lipova-vaihto .lipova-3{position:absolute;left:4%;top:0;width:92%;height:100%;object-fit:contain;opacity:0;transform:scale(.94);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.lipova-vaihto.nayta-3 .lipova-2{opacity:0}
.lipova-vaihto.nayta-3 .lipova-3{opacity:1;transform:none}
.lipova-tulossa{position:absolute;top:4%;right:1%;border-width:3px !important;z-index:2;transform:rotate(6deg);background:linear-gradient(180deg,#ff8a3d,#e8590c);color:#fff;border:2px solid #fff;border-radius:.6rem;padding:.5em 1.25em;font-weight:900;font-size:clamp(1.1rem,2.6vw,1.9rem);letter-spacing:.1em;line-height:1.1;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.25);cursor:pointer;animation:lipova-syke 2.6s ease-in-out infinite}
.lipova-tulossa:hover{background:linear-gradient(180deg,#ff9b57,#d9480f)}
.lipova-tulossa:focus-visible{outline:3px solid #1c7ed6;outline-offset:3px}
.lipova-vaihto.nayta-3 .lipova-tulossa{animation:none}
@keyframes lipova-syke{0%,100%{transform:rotate(6deg) scale(1)}50%{transform:rotate(6deg) scale(1.07)}}
@media (prefers-reduced-motion:reduce){.lipova-tulossa{animation:none}.lipova-vaihto img{transition:none}}

/* 1.5.18: somelinkit yläpalkissa */
.nav-some{display:flex;align-items:center}
#mainNav .navbar-nav .nav-item.nav-some .nav-link{padding-left:.45rem;padding-right:.45rem;font-size:1.05rem;letter-spacing:0}
@media (max-width:991.98px){#mainNav .navbar-nav .nav-item.nav-some{padding:.25rem 0}#mainNav .navbar-nav .nav-item.nav-some .nav-link{padding-left:0;padding-right:1rem}}
/* 1.5.20: napissa "LIPOVA3" + "TULOSSA", ettei näytä siltä että Lipova2 on tulossa */
.lipova-tulossa-nimi{display:inline-block;font-size:1.15em;letter-spacing:.06em}

/* 1.5.21: Tasavirta-banneri (tulossa) ja lisätiedot */
.tasavirta-rivi{margin-top:3rem}
.tasavirta-banneri{position:relative;container-type:inline-size;aspect-ratio:1603/992;display:flex;align-items:flex-end;justify-content:center;border-radius:1.25rem;background:radial-gradient(120% 90% at 20% 15%,#ffffff 0%,#e9f1fb 55%,#d6e5f6 100%);box-shadow:inset 0 0 0 1px rgba(21,101,192,.12);overflow:hidden}
.tv-logo{display:flex;align-items:center;gap:5cqw;width:84%;margin-bottom:9cqw}
.tv-ikoni{width:26cqw;height:auto;flex:none;filter:drop-shadow(0 1.2cqw 2.4cqw rgba(7,47,94,.28))}
.tv-sanat{display:flex;flex-direction:column;min-width:0;text-align:left}
.tv-nimi{font-family:'Varela Round','Nunito',sans-serif;font-weight:700;color:#072f5e;font-size:10.5cqw;line-height:1;letter-spacing:-.01em}
.tv-ala{color:#1565c0;font-weight:800;font-size:3.1cqw;white-space:nowrap;letter-spacing:.12em;text-transform:uppercase;margin-top:1.4cqw}
.tv-ala::before{content:"";display:block;width:16cqw;height:1cqw;border-radius:1cqw;background:#f6c21c;margin-bottom:1.6cqw}
.tv-tiedot{position:absolute;inset:0;z-index:3;overflow:auto;padding:4.5cqw 6cqw;background:linear-gradient(160deg,#0b3d78,#072f5e);color:#fff;text-align:left;border-radius:inherit}
.tv-tiedot h5{color:#f6c21c;font-weight:800;margin:0 2.5rem .7em 0;font-size:clamp(1.1rem,3.6cqw,1.7rem)}
.tv-tiedot ul{margin:0;padding-left:1.2em;font-size:clamp(.9rem,2.5cqw,1.15rem);line-height:1.45}
.tv-tiedot li{margin:.3em 0}
.tv-tiedot li::marker{color:#f6c21c}
.tv-sulje{position:absolute;top:.35rem;right:.7rem;background:none;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;opacity:.85}
.tv-sulje:hover,.tv-sulje:focus-visible{opacity:1}
@media (max-width:991.98px){.tasavirta-rivi{margin-top:2rem}.tasavirta-banneri.auki{aspect-ratio:auto;padding-top:0}.tasavirta-banneri.auki .tv-logo{display:none}.tasavirta-banneri.auki .tv-tiedot{position:relative;inset:auto;width:100%}}

/* 1.5.24: Tietoja ylemmäs + automaattinen Devlog */
.about-section{padding-top:5rem !important;padding-bottom:4rem}
.devlog{max-width:720px;margin-left:auto;margin-right:auto;text-align:left;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:1rem;padding:1.6rem 1.8rem}
.devlog-otsikko{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.35rem}
.devlog-merkki{background:#f0a24a;color:#1b1b1b;font-weight:900;letter-spacing:.14em;font-size:.8rem;padding:.3em .8em;border-radius:.4rem}
.devlog-aika{color:rgba(255,255,255,.55);font-size:.9rem}
.devlog-h{color:#fff;font-size:1.35rem;font-weight:700;margin:.2rem 0 1rem;letter-spacing:.02em}
.devlog-lista{list-style:none;margin:0;padding:0}
.devlog-lista li{display:flex;gap:.8rem;padding:.7rem 0;border-top:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.72);line-height:1.5;font-size:1rem}
.devlog-lista li:first-child{border-top:0}
.devlog-lista b{color:#fff}
.devlog-pvm{color:rgba(255,255,255,.45);font-size:.85em;white-space:nowrap}
.devlog-ikoni{font-size:1.3rem;line-height:1.2;flex:none;width:1.6rem;text-align:center}
.about-section .devlog p.devlog-tulossa{margin:1rem 0 0 !important;padding-top:.9rem;border-top:1px dashed rgba(255,255,255,.18);color:rgba(255,255,255,.72);font-size:1rem;line-height:1.5}
.devlog-tulossa b{color:#f0a24a}
.devlog-linkki{display:inline-block;margin-top:.8rem;color:#f0a24a;font-size:.95rem}
.devlog-linkki:hover,.devlog-linkki:focus{color:#ffc27a}
@media (max-width:575px){.devlog{padding:1.2rem 1.1rem}}

/* 1.5.25: Lue lisää -nappi pois, otsikkokuva matalammaksi ja Tietoja nousee sen alle */
header.masthead{height:auto !important;min-height:0 !important;padding:10rem 0 3rem !important}
.about-section{padding-top:2rem !important}
@media (max-width:991.98px){header.masthead{padding:8.5rem 0 2rem !important}}

/* 1.5.26: motto puhelimella: lainaus yhdelle riville, "– vuodesta 2004" omalle rivilleen */
header.masthead h2 .motto,header.masthead h2 .motto-vuosi{display:inline-block}
@media (max-width:575.98px){header.masthead h2{max-width:none !important;font-size:3.9vw !important;letter-spacing:.04em !important;padding:0 !important}header.masthead h2 .motto,header.masthead h2 .motto-vuosi{display:block}}

/* 1.5.28: CyberLeo Games -logo yläpalkissa (linkki cyberleogames.com, TULOSSA-merkki). Koko samasta --s-muuttujasta kuin muut logot. */
#mainNav .navbar-brand img.nav-cyberleo-logo {
  box-sizing: border-box !important; width: var(--s) !important; height: var(--s) !important;
  min-width: var(--s) !important; min-height: var(--s) !important; max-width: none !important; max-height: none !important;
  flex: 0 0 auto; object-fit: contain; padding: 4px;
  background: radial-gradient(circle at 50% 40%, #12304a 0%, #060c16 75%);
  border: 2px solid #38e1ff; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5), 0 0 14px rgba(56, 225, 255, .35);
  transition: width .3s ease, height .3s ease, min-width .3s ease;
}
.navbar-brand .badge-cyberleo { background: #38e1ff; color: #06202c; animation: none; letter-spacing: .04em; }

/* 1.5.36: 1.5.34–1.5.35 puhelinkevennykset poistettu – Flip7:n raidat olivat Chromen Vulkan-piirtovirhe, ei sivuston vika */