/* ============================================================
   FONTTIKOKEILU — VÄLIAIKAINEN, poistetaan ennen julkaisua
   (tämä tiedosto, fonttikokeilu.js, assets/fonts/testi/ ja
   index.html:n kaksi riviä).

   Otsikkofontti vaihtuu versioittain. Kaikissa versioissa:
     korostukset (käsiala)  Mathew Rohas, ääkköset lisätty itse
     HI made within jälkeen Twicker
     leipäteksti            ennallaan, JetBrains Mono
   ============================================================ */

@font-face{ font-family:'Mathew Rohas'; src:url('../fonts/testi/MathewRohas-fi.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Twicker'; src:url('../fonts/testi/Twicker.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Sublime'; src:url('../fonts/testi/Sublime.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Monigue'; src:url('../fonts/testi/Monigue.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Mathew Rohas Sans'; src:url('../fonts/testi/MathewRohasSans.woff') format('woff'); font-display:swap; }
@font-face{ font-family:'Sunter Roughen'; src:url('../fonts/testi/SunterRoughen.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Boldeon'; src:url('../fonts/testi/Boldeon.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Franie Black'; src:url('../fonts/testi/Franie-Black.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Flukin'; src:url('../fonts/testi/Flukin.woff2') format('woff2'); font-display:swap; }

:root{ --f-kasi:'Mathew Rohas','Hesteria Fallback',cursive; }
.hi__hi{ font-family:'Twicker',var(--f-display); }

html[data-fontit="sublime"]{ --f-display:'Sublime','Rockids Fallback',Impact,sans-serif; }
html[data-fontit="monigue"]{ --f-display:'Monigue','Rockids Fallback',Impact,sans-serif; }
html[data-fontit="mrsans"] { --f-display:'Mathew Rohas Sans','Rockids Fallback',Impact,sans-serif; }
html[data-fontit="sunter"] { --f-display:'Sunter Roughen','Rockids Fallback',Impact,sans-serif; }
html[data-fontit="boldeon"]{ --f-display:'Boldeon','Rockids Fallback',Impact,sans-serif; }
html[data-fontit="franie"] { --f-display:'Franie Black','Rockids Fallback',Impact,sans-serif; }
html[data-fontit="flukin"] { --f-display:'Flukin','Rockids Fallback',Impact,sans-serif; }

/* --- vaihdin --- */
.fk{
  position:fixed; left:12px; bottom:12px; z-index:300;
  display:flex; flex-wrap:wrap; gap:4px; max-width:calc(100vw - 24px);
  padding:6px; background:rgba(25,25,25,.88); border-radius:8px;
  font:600 11px/1 ui-monospace,Consolas,monospace; letter-spacing:.04em;
}
.fk button{
  color:#E4DED0; padding:6px 8px; border-radius:5px; cursor:pointer;
  font:inherit; background:none; border:0;
}
.fk button[aria-pressed="true"]{ background:#E4DED0; color:#191919; }
.fk button:hover:not([aria-pressed="true"]){ background:rgba(228,222,208,.15); }
.fk__piilo{ opacity:.6; }
.fk.kiinni button:not(.fk__piilo){ display:none; }