*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --page:#f3f4f5;
  --content:#ffffff;
  --soft:#eef0f2;
  --soft-2:#e0e4e7;
  --line:#d2d7dc;
  --ink:#333333;
  --text:#444444;
  --muted:#777777;
  --blue:#6f91ad;
  --blue-d:#9fbdd2;
  --blue-l:#dce6ee;
  --nav:#3f464c;
  --nav-2:#59636b;
  --accent:#8a949c;
  --accent-2:#c8ced3;
  --r:3px;
}
html{scroll-behavior:smooth}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--page);
  color:var(--text);
  font-size:15px;
  line-height:1.58;
}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-d);text-decoration:underline}
.topbar{
  background:linear-gradient(135deg,#5d4e75,#2f3946 60%,#25303b);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.9rem 1.6rem;
  gap:1.2rem;
  min-height:78px;
  border-bottom:1px solid #232c34;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
}
.topbar-brand{
  display:flex;
  align-items:center;
  gap:.55rem;
  color:#fff;
  text-decoration:none;
  min-width:0;
}
.topbar-brand:hover{text-decoration:none;color:#fff}
.topbar-logo{
  width:48px;
  height:48px;
  object-fit:contain;
  flex:0 0 auto;
  opacity:1;
  filter:brightness(0) invert(1);
}
.topbar-title-wrap{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.08;
  min-width:0;
}
.topbar-title{
  font-family:Arial,Helvetica,sans-serif;
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:.02em;
  color:#fff;
}
.topbar-subtitle{
  font-family:Arial,Helvetica,sans-serif;
  font-size:.82rem;
  font-weight:400;
  color:#eef3f7;
  margin-top:3px;
  white-space:normal;
}
.topbar-nav,.navlinks{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap}
.topbar-nav a,.navlinks a{
  color:#f2f2f2;
  font-size:.86rem;
  text-decoration:none;
  padding:.2rem .05rem;
}
.topbar-nav a:hover,.navlinks a:hover{color:#fff;text-decoration:underline}
.topbar-nav .nav-cta,.button{
  background:#6f7a83;
  color:#fff;
  padding:.4rem .75rem;
  border-radius:var(--r);
  border:1px solid #4d575f;
  text-decoration:none;
  display:inline-block;
  cursor:pointer;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.88rem;
}
.topbar-nav .nav-cta:hover,.button:hover{background:#59636b;color:#fff;text-decoration:none}
.hero{
  background:#dfe4e8;
  color:var(--ink);
  padding:3.2rem 2rem 2.7rem;
  text-align:center;
  border-bottom:1px solid var(--line);
  position:relative;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.45),rgba(255,255,255,0),rgba(255,255,255,.3));
  pointer-events:none;
}
.hero>*{position:relative}
.hero-eyebrow{
  color:#66717a;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:.75rem;
}
.hero h1{
  font-family:Georgia,"Times New Roman",serif;
  color:#2f363c;
  font-size:clamp(2.2rem,5vw,3.5rem);
  font-weight:normal;
  line-height:1.08;
  margin-bottom:.55rem;
}
.hero h1 em{font-style:italic;color:var(--blue-d)}

.hero-logo{
  width:80px;
  height:auto;
  opacity:.18;
  margin:1rem auto .25rem;
  display:block;
  filter:none;
  pointer-events:none;
}


.hero-sub{
  max-width:560px;
  margin:.75rem auto 0;
  color:#59636b;
  font-size:1rem;
}
.search-bar-wrap{max-width:660px;margin:2rem auto 0}
.search-bar{
  display:flex;
  background:#fff;
  border:1px solid #b9c2ca;
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.search-bar input{
  flex:1;
  border:0;
  outline:0;
  padding:.72rem .9rem;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.96rem;
  color:var(--ink);
  min-width:0;
}
.search-bar button{
  background:var(--blue);
  color:#fff;
  border:0;
  border-left:1px solid #34516b;
  padding:.72rem 1.35rem;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.92rem;
  cursor:pointer;
}
.search-bar button:hover{background:var(--blue-d)}
.search-hints{margin-top:.65rem;font-size:.82rem;color:#66717a}
.search-hints a{color:var(--blue-d)}
.stats-strip{
  display:flex;
  justify-content:center;
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stat-item{
  text-align:center;
  padding:1rem 2.25rem;
  border-right:1px solid var(--line);
}
.stat-item:last-child{border-right:0}
.stat-num{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.8rem;
  color:#333;
  line-height:1;
  display:block;
}
.stat-lbl{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-top:.25rem;
}
.main-content,.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:2.4rem 2rem 3.5rem;
}
.main-content{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:2rem;
  align-items:start;
}
.section-label{
  color:#66717a;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:bold;
  margin-bottom:.45rem;
}
.section-title,h1,h2,h3{
  font-family:Georgia,"Times New Roman",serif;
  color:#333;
  font-weight:normal;
}
.section-title{font-size:1.5rem;margin-bottom:1.1rem;line-height:1.2}
.species-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:.75rem;
  margin-bottom:2rem;
}
.species-card,.card,.sidebar-card{
  background:var(--content);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.species-card{
  padding:.85rem .95rem;
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.species-card:hover{
  background:#f7f9fa;
  border-color:#b7c1ca;
  text-decoration:none;
}
.species-card .sp-fi{color:#333;font-weight:bold;font-size:.93rem}
.species-card .sp-count{color:var(--muted);font-size:.78rem}
.recent-list{list-style:none}
.recent-item{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.75rem;
  padding:.55rem 0;
  border-bottom:1px solid var(--line);
}
.recent-name{font-weight:bold;color:var(--blue-d)}
.recent-name:hover{color:#cfe0ec}
.recent-reg,.recent-meta,.muted,.tag{color:var(--muted);font-size:.82rem}
.sidebar{display:flex;flex-direction:column;gap:1rem}
.sidebar-card,.card{padding:1.15rem}
.sidebar-card h3{font-size:1.15rem;margin-bottom:.6rem}
.sidebar-card p{font-size:.9rem;color:#666}
.sidebar-card a{font-size:.86rem;font-weight:bold;color:var(--blue)}
.show-result-item{padding:.45rem 0;border-bottom:1px solid var(--line);font-size:.85rem}
.show-result-item:last-child{border-bottom:0}
.show-result-item .sr-name{font-weight:bold;color:var(--blue-d)}
.show-result-item .sr-cert{
  display:inline-block;
  font-size:.68rem;
  font-weight:bold;
  padding:1px 6px;
  border-radius:99px;
  background:var(--blue-l);
  color:var(--blue-d);
  margin-left:4px;
}
.show-result-item .sr-meta{color:var(--muted);font-size:.75rem}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.filters input,.filters select,.show-tools input{
  border:1px solid #b9c2ca;
  border-radius:var(--r);
  padding:.55rem .65rem;
  background:#fff;
  font-family:Arial,Helvetica,sans-serif;
}
.result-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:1rem;
  padding:.72rem 0;
  border-bottom:1px solid var(--line);
}
.result-row a{font-weight:bold;color:var(--blue)}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.8rem;color:#444;font-weight:bold;background:#e9edf0}
.notice{
  padding:.75rem .95rem;
  border-radius:var(--r);
  background:#eef3f6;
  border:1px solid #c8d3dc;
}
.notice.error,.errbox{
  background:#fff1f1;
  color:#8a1f1f;
  border:1px solid #e8bbbb;
}
.pill{display:inline-block;padding:1px 7px;border-radius:999px;background:#eef0f2;font-size:.76rem}
.match-ok{color:#247039}.match-warn{color:#8a5b00}.match-bad{color:#8a1f1f}
footer{
  background:#3f464c;
  color:#d7dce0;
  text-align:center;
  padding:1.4rem 2rem;
  font-size:.82rem;
  border-top:1px solid #2f363c;
}
footer a{color:#fff}
footer .footer-brand{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.05rem;
  color:#fff;
  margin-bottom:.3rem;
}
@media(max-width:760px){
  .topbar{align-items:flex-start;flex-direction:column;padding:.7rem 1rem}.topbar-logo{width:34px;height:34px}
  .topbar-nav{gap:.75rem}
  .main-content{grid-template-columns:1fr}
  .stats-strip{flex-wrap:wrap}
  .stat-item{flex:1 1 125px;border-right:0;border-bottom:1px solid var(--line)}
  .search-bar{flex-direction:column}
  .search-bar button{border-left:0;border-top:1px solid #34516b}
  .result-row{grid-template-columns:1fr}
}
@media print{
  .topbar,.navlinks,.filters,.button,footer{display:none!important}
  body{background:#fff}
  .wrap,.main-content{max-width:none;padding:0}
}


/* Hamsuku: vaaleammat eläinlinkit ja lisätietopyynnöt */
.pname, .pedigree-card .pname, .show-card a, .hamster-name-link { color: var(--blue-d); }
.pname:hover, .pedigree-card .pname:hover, .show-card a:hover, .hamster-name-link:hover { color: #cfe0ec; }
.notice.success { background:#eef8ef; border:1px solid #b9dfbf; color:#2d6434; padding:.75rem; border-radius:3px; }

@media(max-width:760px){.topbar{align-items:flex-start}.topbar-title{font-size:.98rem}.topbar-subtitle{font-size:.68rem}.topbar-logo{width:30px;height:30px}}

.inbreeding-note { margin-top:.65rem; font-size:.82rem; color:#666; line-height:1.35; }
.inbreeding-note strong { color:#444; }


/* Yhtenäinen, kompakti SHY-header kaikille sivuille */
.topbar{
  background:linear-gradient(#59636b,#3f464c);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.34rem 1.15rem;
  gap:1rem;
  min-height:46px;
  border-bottom:1px solid #2f363c;
  box-shadow:0 1px 3px rgba(0,0,0,.16);
}
.topbar-brand{display:flex;align-items:center;gap:.48rem;color:#fff;text-decoration:none;min-width:0}
.topbar-brand:hover{color:#fff;text-decoration:none}
.topbar-logo{width:26px;height:26px;object-fit:contain;flex:0 0 auto}
.topbar-title-wrap{display:flex;flex-direction:column;justify-content:center;line-height:1.04;min-width:0}
.topbar-title{font-family:Arial,Helvetica,sans-serif;font-size:.98rem;font-weight:600;letter-spacing:.01em;color:#fff}
.topbar-subtitle{font-family:Arial,Helvetica,sans-serif;font-size:.68rem;font-weight:400;color:#d7dde2;margin-top:1px;white-space:normal}
.topbar-nav{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.topbar-nav a{color:#f2f2f2;font-size:.82rem;text-decoration:none;padding:.15rem .04rem}
.topbar-nav a:hover{color:#fff;text-decoration:underline}
.topbar-nav .nav-cta{background:#6f7a83;color:#fff;padding:.32rem .62rem;border-radius:3px;border:1px solid #4d575f;text-decoration:none}
.topbar-nav .nav-cta:hover{background:#59636b;color:#fff;text-decoration:none}

/* Hamsterin sukusivu tarvitsee leveämmän tilan sukutaululle */
.wrap.hamster-page{
  max-width:1080px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  padding-left:2rem;
  padding-right:2rem;
  box-sizing:border-box;
}
.hamster-page .pedigree-section{
  max-width:100%;
  overflow:hidden;
}
.hamster-page .tree-scroll,
.hamster-page .pedigree-section .tree-scroll{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.hamster-page .pedigree-tree{
  min-width:max-content;
  width:max-content;
}

@media (max-width:760px){
  .topbar{align-items:flex-start;flex-direction:column;padding:.45rem .8rem;gap:.35rem}
  .topbar-logo{width:24px;height:24px}
  .topbar-title{font-size:.96rem}
  .topbar-subtitle{font-size:.66rem}
  .topbar-nav{gap:.6rem}
  .wrap.hamster-page{padding-left:.75rem;padding-right:.75rem;max-width:100%}
}


/* Hamsterisivun leveyskorjaus: sivu normaalilevyiseksi, vain sukutaulu scrollaa */
body .wrap.hamster-page{
  max-width:1080px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
body .hamster-page .pedigree-section{
  max-width:100% !important;
  overflow:hidden !important;
}
body .hamster-page .tree-scroll{
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
body .hamster-page .pedigree-tree{
  min-width:max-content !important;
  width:max-content !important;
}


/* 2026-05 tietokantapäivitys: header-linkit painikemaisiksi ja mobiilinäkymät */
.topbar-nav a,.navlinks a{display:inline-flex;align-items:center;gap:.25rem;padding:.48rem .72rem;border:1px solid rgba(111,145,173,.35);border-radius:999px;background:rgba(255,255,255,.72);text-decoration:none;font-weight:700;line-height:1.1}
.topbar-nav a:hover,.navlinks a:hover{background:#fff;border-color:rgba(111,145,173,.75)}
.topbar-nav .nav-cta{background:#3D2E1E;color:#fff;border-color:#3D2E1E}
@media(max-width:760px){.topbar,.topbar-brand{align-items:flex-start}.topbar-nav,.navlinks{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.topbar-nav a,.navlinks a{justify-content:center;text-align:center;border-radius:12px}.result-row{display:block}.result-row>.tag{margin-top:.35rem;text-align:left}.filters{grid-template-columns:1fr!important}}


/* 2026-05-13 palautekorjaus: tummempi vaalea alusta, vaaleat tekstit tummalla, erottuvat napit ja yhtenäinen valikko */
:root{
  --page:#e6eaed;
  --content:#f7f8f9;
  --soft:#dfe5e9;
  --soft-2:#cfd8de;
  --line:#b9c5cc;
  --ink:#22282d;
  --text:#2f363c;
  --muted:#5f6a72;
  --blue:#334f68;
  --blue-d:#20394f;
  --blue-l:#d6e0e8;
  --nav:#283139;
  --nav-2:#3a4650;
  --accent:#334f68;
  --accent-2:#9fb1bd;
}
body{background:var(--page);color:var(--text)}
.card,.sidebar-card,.species-card,table,.search-bar,.show-board-row,.pedigree-card,.show-card,.pick{background:var(--content)!important;color:var(--text)}
.card,.sidebar-card,.species-card,.show-board-row,.pedigree-card,.show-card,.pick,.notice,table{border-color:var(--line)!important}
.hero,.show-board-head,th{background:#d7dee3!important;color:var(--ink)!important}
.topbar,footer{background:linear-gradient(#3a4650,#283139)!important;color:#f7f8f9!important}
.topbar-title,.topbar-brand,.topbar-brand:hover,footer .footer-brand{color:#fff!important}
.topbar-subtitle,footer{color:#dce3e8!important}
.topbar-nav a,.navlinks a{
  background:#eef3f6!important;
  color:#20394f!important;
  border:1px solid #9fb1bd!important;
  border-radius:10px!important;
  font-weight:700!important;
  box-shadow:0 1px 1px rgba(0,0,0,.08);
}
.topbar-nav a:hover,.navlinks a:hover{background:#fff!important;color:#142536!important;text-decoration:none!important;border-color:#6f8392!important}
.topbar-nav .nav-cta{background:#20394f!important;color:#fff!important;border-color:#142536!important}
.topbar-nav .nav-cta:hover{background:#142536!important;color:#fff!important}
.button,button,.filters button,.search-bar button,a.button,input[type=submit]{
  background:#20394f!important;
  color:#fff!important;
  border:1px solid #142536!important;
  border-radius:8px!important;
  font-weight:700!important;
  text-decoration:none!important;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.button:hover,button:hover,.filters button:hover,.search-bar button:hover,a.button:hover,input[type=submit]:hover{background:#142536!important;color:#fff!important;text-decoration:none!important}
.button.secondary,a.button.secondary,button.secondary{background:#eef3f6!important;color:#20394f!important;border-color:#9fb1bd!important}
.button.secondary:hover,a.button.secondary:hover,button.secondary:hover{background:#dce6ee!important;color:#142536!important}
.filters input,.filters select,.show-tools input,input,select,textarea{background:#fff!important;color:#22282d!important;border-color:#9fb1bd!important}
.animal-page-title,.pedigree-card .pname,.result-row a,.recent-name,.sidebar-card a,a{color:#20394f}
.animal-page-title,.section-title,h1,h2,h3{color:#22282d!important}
.show-line{background:#e3e8ec!important;border-left-color:#20394f!important;color:#22282d!important}
.tree-scroll{background:#dfe5e9!important;border-color:#b9c5cc!important}
.pedigree-card.unknown{background:#eceff1!important;color:#6e787f!important}
.notice.info,.notice{background:#dce6ee!important;color:#25313a!important;border-color:#b6c5d0!important}
.notice.error,.errbox{background:#fff0f0!important;color:#782020!important;border-color:#d9a9a9!important}
@media(max-width:760px){.topbar-nav a,.navlinks a{min-height:2.4rem}}


/* 2026-05-14: viimeistely headeriin ja etusivun logoon */
.topbar{
  background:linear-gradient(135deg,#5d4e75,#2f3946 60%,#25303b)!important;
  padding:1.05rem 1.7rem!important;
  min-height:88px!important;
  gap:1.25rem!important;
  border-bottom:1px solid #232c34!important;
  box-shadow:0 3px 10px rgba(0,0,0,.22)!important;
}
.topbar-brand{gap:.75rem!important}
.topbar-logo{
  width:54px!important;
  height:54px!important;
  opacity:1!important;
  filter:brightness(0) invert(1)!important;
}
.topbar-title{font-size:1.38rem!important;font-weight:700!important;letter-spacing:.02em!important}
.topbar-subtitle{font-size:.86rem!important;color:#eef3f7!important;margin-top:3px!important}
.hero-logo{
  width:80px!important;
  max-width:80px!important;
  height:auto!important;
  opacity:.18!important;
  margin:1rem auto .25rem!important;
  display:block!important;
  filter:none!important;
  image-rendering:auto!important;
}
@media(max-width:760px){
  .topbar{padding:.9rem 1rem!important;min-height:82px!important;gap:.55rem!important}
  .topbar-logo{width:46px!important;height:46px!important}
  .topbar-title{font-size:1.12rem!important}
  .topbar-subtitle{font-size:.76rem!important}
  .hero-logo{width:72px!important;max-width:72px!important}
}

/* 2026-05-14: headerin kevyt rekisterihaku */
.topbar-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.55rem;
  flex:1 1 auto;
  min-width:0;
}
.topbar-actions .topbar-nav{
  justify-content:flex-end;
}
.topbar-search{
  width:min(720px,100%);
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  background:#fff;
  border:1px solid #b9c5cc;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.16);
}
.topbar-search input{
  flex:1 1 auto;
  min-width:220px;
  border:0!important;
  background:#fff!important;
  color:#22282d!important;
  padding:.58rem .85rem!important;
  font-size:.88rem;
  line-height:1.2;
  outline:none;
}
.topbar-search input::placeholder{color:#6a737b;opacity:1}
.topbar-search button{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:4px;
  min-height:34px;
  padding:.48rem .82rem!important;
  border-radius:10px!important;
  background:#eef3f6!important;
  color:#20394f!important;
  border:1px solid #9fb1bd!important;
  font-weight:700!important;
  box-shadow:0 1px 1px rgba(0,0,0,.08)!important;
}
.topbar-search button:hover{
  background:#fff!important;
  color:#142536!important;
  border-color:#6f8392!important;
  text-decoration:none!important;
}
footer a:hover{
  color:#cfe0ec!important;
  text-decoration:underline;
}
@media(max-width:980px){
  .topbar{align-items:flex-start!important;flex-direction:column!important}
  .topbar-actions{width:100%;align-items:stretch}
  .topbar-actions .topbar-nav{justify-content:flex-start}
  .topbar-search{width:100%}
}
@media(max-width:760px){
  .topbar-search{border-radius:12px}
  .topbar-search input{min-width:0;font-size:.86rem;padding:.58rem .7rem!important}
  .topbar-search button{min-height:34px;padding:.45rem .7rem!important}
}

/* 2026-05-14: headerin haku viimeistelty käyttäjäpalautteen mukaan */
.topbar-logo{
  width:68px!important;
  height:68px!important;
}
.topbar-brand{
  gap:1rem!important;
}
.topbar-search{
  width:min(560px,100%)!important;
  height:38px!important;
  border-radius:14px!important;
  align-items:center!important;
}
.topbar-search input{
  height:100%!important;
  padding:.42rem .85rem!important;
  font-size:.86rem!important;
  line-height:1.1!important;
}
.topbar-search button{
  min-height:0!important;
  height:30px!important;
  margin:3px!important;
  padding:.42rem .76rem!important;
  border-radius:10px!important;
  font-size:.86rem!important;
  line-height:1.1!important;
}
@media(max-width:760px){
  .topbar-logo{width:54px!important;height:54px!important}
  .topbar-search{width:100%!important;height:38px!important}
  .topbar-search button{height:30px!important}
}

/* 2026-05-14: etusivun tuoreet valiot -laatikko */
.champion-card{
  margin-top:1.25rem;
}
.champion-list{
  list-style:none;
  margin:0;
  padding:0;
}
.champion-item{
  padding:.78rem 0;
  border-top:1px solid rgba(30,45,55,.12);
}
.champion-item:first-child{
  border-top:0;
  padding-top:0;
}
.champion-link{
  display:block;
  color:inherit;
  font-weight:600;
  line-height:1.35;
  text-decoration:none;
}
.champion-link:hover{
  text-decoration:underline;
}
.champion-meta{
  margin-top:.22rem;
  font-size:.92rem;
  line-height:1.35;
  opacity:.78;
}


/* 2026-05-16 UX-päivitykset */
.champion-list, .champion-list ul { list-style:none!important; padding-left:0!important; margin-left:0!important; }
.champion-item::marker { content:""; }
@media(max-width:760px){
  .pup-table-wrap{overflow:visible!important;border:0!important;background:transparent!important}
  .pup-table{display:block!important;min-width:0!important;border:0!important;background:transparent!important}
  .pup-table thead{display:none!important}
  .pup-table tbody{display:grid!important;gap:.75rem!important}
  .pup-table tr{display:grid!important;grid-template-columns:2.4rem 1fr 1fr!important;gap:.45rem!important;background:#fff!important;border:1px solid #d8d0e5!important;border-radius:16px!important;padding:.65rem!important}
  .pup-table td{display:block!important;border:0!important;padding:0!important}
  .pup-table td:nth-child(2){grid-column:2 / -1!important}
  .pup-table input,.pup-table select{font-size:.86rem!important;padding:.46rem .6rem!important;min-width:0!important}
  .pup-row-num{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;border-radius:999px!important;background:#eef3f6!important;color:#20394f!important;font-weight:700!important}
  .pup-tools{align-items:flex-start!important;flex-direction:column!important}
}


/* Yhteinen footer-credit */
.footer-credit{margin-top:.45rem;font-size:12px;line-height:1.35;opacity:.72;}
.footer-credit a{color:inherit;text-decoration:underline;}