/* Jallu #8 — yhteinen tyyli kaikille sivuille.
 * Teema: KalPan musta ja keltainen, ilta hallissa. Vain tumma teema
 * (SAANNOT «Ilme»). */
:root{
  color-scheme: dark;
  --tausta:#0d0d0b; --kortti:#181814; --kortti2:#22221c; --muste:#f4f1e6; --himmea:#a39f8e;
  --kelta:#ffcc00; --kelta-tumma:#b38f00; --raja:#34332b; --puna:#ff6b57; --vihrea:#7fd67a;
  --pyorea:16px;
  --otsikko:"Avenir Next Condensed","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--tausta); color:var(--muste);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5; touch-action:manipulation;
  /* Jään naarmut: muutama hyvin himmeä vino viiva. */
  background-image:
    repeating-linear-gradient(118deg, transparent 0 46px, rgba(255,255,255,.018) 46px 47px, transparent 47px 140px),
    repeating-linear-gradient(64deg, transparent 0 90px, rgba(255,255,255,.014) 90px 91px, transparent 91px 230px);
  min-height:100vh;
}
a{color:var(--kelta)}
img{max-width:100%}
.sivu{max-width:860px; margin:0 auto; padding:0 16px 64px}

/* Yläpalkki */
.yla{position:sticky; top:0; z-index:20; background:rgba(13,13,11,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--raja)}
.yla .sisus{max-width:860px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:12px}
.merkki{font-family:var(--otsikko); font-weight:900; font-style:italic; font-size:1.35rem; letter-spacing:.02em;
  color:var(--muste); text-decoration:none; white-space:nowrap}
.merkki b{color:var(--kelta)}
.navi{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; margin-left:auto}
.navi::-webkit-scrollbar{display:none}
.navi a{color:var(--himmea); text-decoration:none; padding:7px 11px; border-radius:999px; font-size:.92rem; white-space:nowrap; font-weight:600}
.navi a:hover{color:var(--muste)}
.navi a.nyt{background:var(--kelta); color:#111}

h1,h2,h3{font-family:var(--otsikko); font-weight:900; line-height:1.1; letter-spacing:.01em}
h1{font-size:clamp(2rem,7vw,3.2rem); font-style:italic; text-transform:uppercase; margin:28px 0 6px}
h2{font-size:1.45rem; text-transform:uppercase; font-style:italic; margin:36px 0 12px}
h2 .kelta, h1 .kelta{color:var(--kelta)}
h3{font-size:1.15rem; margin:0 0 8px}
.alaotsikko{color:var(--himmea); margin:0 0 20px; font-size:1.02rem}

.kortti{background:var(--kortti); border:1px solid var(--raja); border-radius:var(--pyorea); padding:18px; margin:0 0 14px}
.kortti.kelta{border-color:var(--kelta-tumma); background:linear-gradient(160deg,#2a2510,var(--kortti) 60%)}
.ruudukko{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.ruudukko .kortti{margin:0}
.pieni{font-size:.86rem; color:var(--himmea)}
.iso{font-family:var(--otsikko); font-weight:900; font-size:2.4rem; line-height:1}

button,.nappi{font:inherit; font-weight:700; border:0; border-radius:12px; padding:11px 16px;
  background:var(--kelta); color:#111; cursor:pointer; text-decoration:none; display:inline-block; text-align:center}
button.toinen,.nappi.toinen{background:var(--kortti2); color:var(--muste); border:1px solid var(--raja)}
button.vaara{background:transparent; color:var(--puna); border:1px solid #5a2a24}
button:disabled{opacity:.5; cursor:default}
button:active{transform:translateY(1px)}
input,select,textarea{font:inherit; color:var(--muste); background:var(--tausta); border:1px solid var(--raja);
  border-radius:10px; padding:10px 12px; width:100%}
textarea{min-height:80px; resize:vertical}
label{display:block; font-size:.86rem; color:var(--himmea); font-weight:600}
label > input, label > select, label > textarea{margin-top:4px}
.lomake{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px}
.lomake .leve{grid-column:1/-1}

.valinta{display:inline-flex; background:var(--kortti2); border:1px solid var(--raja); border-radius:999px; padding:3px; gap:2px}
.valinta button{background:transparent; color:var(--himmea); border-radius:999px; padding:7px 16px}
.valinta button.nyt{background:var(--kelta); color:#111}

.vastaus{font-size:1.25rem; font-weight:700; line-height:1.4; min-height:3.6em; margin:12px 0}
.vastaus.iso-teksti{font-family:var(--otsikko); font-size:1.6rem; font-style:italic}
.lainaus{border-left:4px solid var(--kelta); padding:4px 0 4px 14px; margin:8px 0; font-style:italic}

table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
th,td{padding:8px 6px; text-align:right; border-bottom:1px solid var(--raja); white-space:nowrap}
th{color:var(--himmea); font-size:.8rem; font-weight:700}
th:nth-child(2),td:nth-child(2){text-align:left; width:100%}
tr.oma td{background:rgba(255,204,0,.13); color:var(--kelta); font-weight:800}
tr.raja td{border-bottom:2px dashed var(--kelta-tumma)}

.merkit{display:flex; flex-wrap:wrap; gap:8px}
.merkki-pala{background:var(--kortti2); border:1px solid var(--raja); border-radius:12px; padding:8px 10px; font-size:.86rem}
.merkki-pala.auki{border-color:var(--kelta-tumma)}
.merkki-pala.kiinni{opacity:.4}

.ala{max-width:860px; margin:40px auto 0; padding:20px 16px 40px; color:var(--himmea); font-size:.85rem; border-top:1px solid var(--raja)}
[hidden]{display:none!important}

#aaniNappi{padding:6px 10px; font-size:1rem; margin-left:auto}
#aaniNappi + .navi{margin-left:8px}
#virhebanneri{position:fixed; left:8px; right:8px; bottom:8px; z-index:99; background:#5a1d16; color:#fff;
  padding:10px 12px; border-radius:10px; font-size:.85rem}

@media (max-width:560px){
  .yla .sisus{flex-wrap:wrap; gap:6px}
  .navi, #aaniNappi + .navi{margin-left:0; width:100%}
  .kortti{padding:15px}
}